Javascript 当我不希望函数再次运行时，如何停止它？（jquery）

我的js代码中有很多地方不正确。 当我多次单击“显示”时，方框1会不断向下移动。当我多次“隐藏”时，同样的事情也会发生在盒子2上。我该如何阻止这种情况发生

我还想补充一点，我如何使盒子在显示和隐藏时“褪色”？我似乎只有在它出现的时候才能让它工作。 另外，我不想使用切换按钮，我想使用两个按钮，因为我正在试验一些东西

这里有一个

感谢您抽出时间：）

编辑：

我得到了我想要的工作方式所有感谢你们！ 你所有的答案都不是我想要的，但有了你所有的答案，我肯定能找到答案。所以非常感谢你们所有人的回答和帮助：）我真的很感激

下面是更新的JSFIDLE链接

再次感谢大家。干杯

您可以尝试：

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);
});

---

希望这对你有帮助。。别忘了检查它是否是你要找的东西….=）

我假设您一次只希望显示一个框。这是解决办法

如果你不能理解，请提一下你的疑问。我使用CSS类来实现fadein和fadeout。这是最简单的方法。尽管您可以使用

.show（）

，

.hide（）

，

.fadeOut（）

，

.fadeIn（）

jquery函数来实现同样的功能

---

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

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

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);
});

$(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();
  })
 });