Question

我有一个我要设置动画的内容区域，但是动画仅在我第一次点击触发器时才有效。在第二次触发时，动画会反转。这是我的代码。

HTML

<div class="drawer-content" id="signin">   
</div><!--End #signin-->

jQuery

$(document).ready(function() {

    //We hide the panel
    $('.drawer-content').css('marginTop', '-140px' );

    //When the anchor is clicked the panel will slide up        
    $('.open-drawer').click(function(){ 
        $('.drawer-content').animate({marginTop: '0px',}, 1000 );

        //Append active class to anchor
        $(this).removeClass('open-drawer').addClass('active');

        //On click the active link will cause the panel to slide down
        $('.active').click(function() {
            $(this).removeClass('active').addClass('open-drawer');
            $('.drawer-content').animate({marginTop: '-140px',}, 1000 );
        });

    });

});//End DOM Load

修改以下是那些提问者的实例。谢谢！ http://livecoding.io/3854307

评论应该使这个很明显。它第一次工作，但是如果我再次尝试运行动画，则框会向下滑动，然后再向右滑动。我做错了什么？

Answer 1

这取决于你的html，但我期望的是“click”在.open-drawer上注册，这会启动动画并将点击处理程序设置为.active。

现在，如果.active是.open-drawer的父级（在HTML中），它会注意到相同的点击（因为它没有在DOM中向上冒泡），从而将动画附加到当前动画。 / p>

我的第一个建议是在第一个事件处理程序中添加event.stopPropagation()，看看会发生什么。

但如上所述，如果没有HTML或示例页面，很难发现问题并进行调试。

（另见http://api.jquery.com/event.stopPropagation/）

Answer 2

.slideToggle会为你工作吗？描述：以滑动方式显示或隐藏匹配的元素。

UPDATE！

尝试用此替换你的jquery代码。

 //We hide the panel
$('.drawer-content').hide();

//When the anchor is clicked the panel will slide up        
$('.open-drawer').click(function(){
    $('.drawer-content').slideToggle();

});

jQuery动画第二次没有工作

2 个答案: