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

Lots of things are not right in my js code. When I click "Show" more than once, #box-1 just keeps moving further and further down. Same thing's happening for #box-2 when I clock "Hide" more than once. How do I stop this from happening?

我的js代码中有很多东西是不对的。当我不止一次点击“显示”时,#box-1只是继续向下移动。当我不止一次地“隐藏”时,#box-2也发生了同样的事情。我如何阻止这种情况发生?

I'd also like to add, how to I make the boxes "fade" when it shows and hides? I can only seem to make it work when it's showing. Also i don't want to use a toggle button, I want to use 2 buttons because I'm experimenting on something.

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

Here's a JSFiddle link

这是一个JSFiddle链接

Thank you for your time :)

感谢您的时间 :)

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

EDIT:

I got the code working the way I wanted to all thanks to you guys! All your answers isnt exactly what I was looking for, but with all of your answers, I definitely got it working. So thank you very much to all of you for answering and helping me out :) I really appreciate it.

我得到的代码按照我想要的方式运行,谢谢你们!你的所有答案都不是我想要的,但是你的所有答案都得到了解决。所以非常感谢你们所有人回答和帮助我:)我真的很感激。

Here's the updated JSFiddle link https://jsfiddle.net/vr1u0wzu/83/

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

Thank you once again people. Cheers!

再次感谢大家。干杯!

3 个解决方案

#1

You could try:

你可以尝试:

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

hope this helps you.. don't forget to upcheck if it is what you're looking for.. =)

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

#3

I assume that you want only one box to be displayed at a time. Here is the solution https://jsfiddle.net/vr1u0wzu/55/.

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

If you are not able to understand, please mention your doubt. I have used CSS classes to achieve the fadein and fadeout. This is the simplest way to do it. Although you can use .show(), .hide(),.fadeOut(), .fadeIn() jquery functions to achieve the same.

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

The reason why the box kept moving down is because you were not resetting it's top to 0px;

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