当我不希望某个功能再次运行时，如何停止它？（jQuery）答案

【问题标题】：How do I stop a function running again when I dont want it to? (jquery)当我不希望某个功能再次运行时，如何停止它？（jQuery）
【发布时间】：2015-05-12 09:19:48
【问题描述】：

我的 js 代码中有很多地方不对劲。当我多次单击“显示”时，#box-1 只会继续向下移动。当我不止一次“隐藏”时，#box-2 也会发生同样的事情。我该如何阻止这种情况发生？

我还想补充一下，如何让盒子在显示和隐藏时“淡出”？我似乎只能在它显示时让它工作。另外我不想使用切换按钮，我想使用 2 个按钮，因为我正在尝试一些东西。

这是JSFiddle link

感谢您的宝贵时间:)

$(document).ready(function(){
$('a#hide').click(function(){
    $('#box1').hide().animate({'top': '-=155px', opacity: 0}, 500);
    $('#box2').show().animate({'top': '+=155px', opacity: 1}, 500); 
})

$('a#show').click(function(){
    $('#box1').show().animate({'top': '+=155px', opacity: 1}, 500);       
    $('#box2').hide().animate({'top': '-=155px', opacity: 0}, 500);
}) });

编辑：

感谢你们，我得到了我想要的代码！你所有的答案都不是我想要的，但是有了你所有的答案，我肯定会得到它的工作。所以非常感谢你们所有人的回答和帮助我:)我真的很感激。

这是更新后的 JSFiddle 链接 https://jsfiddle.net/vr1u0wzu/83/

再次感谢大家。干杯！

【问题讨论】：

添加 if 语句，仅在框分别隐藏/显示时才执行代码。
你的第一个问题是你增加/减少你的值......第二个是你希望另一个盒子淡出而不是隐藏......

标签： javascript jquery function web

【解决方案1】：

你可以试试：

function hideIt() {
  $('#box1').hide().animate({'top': '-=155px', opacity: 0}, 500);
  $('#box2').show().animate({'top': '+=155px', opacity: 1}, 500); 
  $('a#show').one('click', showIt);
}
function showIt() {
  $('#box1').show().animate({'top': '+=155px', opacity: 1}, 500);       
  $('#box2').hide().animate({'top': '-=155px', opacity: 0}, 500);
  $('a#hide').one('click', hideIt);
}

$(document).ready(function(){
  $('a#hide').one('click', hideIt);
});

【讨论】：

【解决方案2】：

$(document).ready(function(){
    $('a#hide').click(function(){
    $('#box1').fadeOut();
    $('#box2').show().animate({'top': '155px', opacity: 1}, 500); 
    })

    $('a#show').click(function(){
    $('#box1').show().animate({'top': '155px', opacity: 1}, 500);       
    $('#box2').fadeOut();
  })
 });

希望这对您有所帮助..不要忘记检查它是否是您要查找的内容.. =)

【讨论】：

【解决方案3】：

我假设您希望一次只显示一个框。这是解决方案https://jsfiddle.net/vr1u0wzu/55/。

如果您不能理解，请提出您的疑问。我使用 CSS 类来实现淡入和淡出。这是最简单的方法。虽然您可以使用.show()、.hide()、.fadeOut()、.fadeIn() jquery 函数来实现相同的功能。

盒子一直向下移动的原因是你没有将它的顶部重置为0px；

【讨论】：