当我不想要它时，如何停止再次运行的功能？ （jquery的）

Question

我的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/

再次感谢大家。干杯！

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

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

希望这可以帮助你...不要忘记检查它是否是你正在寻找的东西.. =）

Answer 3

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

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

盒子继续向下移动的原因是因为你没有把它重置为0px;