jquery - jquery无尽的动画问题

Question

我想创建一个非常简单的菜单，隐藏了一个 div“测试”，当我点击一个 div“trig”时，会显示测试。然后当我再次点击触发时，测试被隐藏了。它适用于第一次单击，然后当我再次单击触发时，动画播放 2 次，当我再次单击时，它播放 3 次，一次又一次。

我的代码是：

<div class="trig">trig</div>
<div class="test">test</div>

<script src="jquery.js"></script>
<script>
$(function () {

$('.test').hide();

function bis() { 
    $('.trig').click(function() { 
        var trig = $(this);
        var test = trig.next();
        test.show(300,function() {
            trig.click(function(){
                test.hide(300, function() { bis(); })
            ;});
        ;});
    });
};

bis();

});
</script>

Answer 1

您的函数只工作一次，因为在那之后，如果您单击触发器，首先$('.trig').click(function()会调用显示您的测试，然后在trig.click(function()调用的回调中show也会立即再次隐藏您的测试。

使用该toggle()功能切换元素。

$('.trig').click(function() { 
    var trig = $(this);
    var test = trig.next();
    test.toggle(300);
});

文档：http ://api.jquery.com/toggle/

小提琴：http: //jsfiddle.net/suEg4/

Answer 2

这是简单的事情...尝试如下...它会工作...

小提琴示例：http: //jsfiddle.net/RYh7U/103/

 $('.test').toggle();
 $('.trig').click(function() { 
     $('.test').toggle("slow");
});