0

我有一个要制作动画的内容区域，但是动画仅在我第一次单击触发器时才起作用。在触发器的第二次单击时，动画反转。这是我的代码。

的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

评论应该使这一点不言自明。它第一次工作，但如果我尝试再次运行动画，框只是向下滑动，然后再次向上滑动。我究竟做错了什么？

4

2 回答 2

0

.slideToggle 会为您工作吗？描述：通过滑动显示或隐藏匹配的元素。

更新！

尝试用这个替换你的 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();

});
于 2012-10-08T19:15:06.320 回答
0

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

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

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

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

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

于 2012-10-08T19:00:12.313 回答