jquery-animate - 带有徽标动画的 jQuery slideToggle

Question

我正在尝试从登录页面的最顶部创建一个抽屉。我还在页面的顶部中心边缘设置了一个徽标。因此，当用户单击抽屉触发器时，抽屉应打开带有徽标，并且徽标会更改其位置以margin-top: some value;使徽标垂直和水平位于抽屉底部边缘的中心。

我有这个 jQuery 代码：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".button").click(function(){
$(".topHidden").slideToggle();
$(".logo").animate({marginTop:'-50px'}, 1000, 'swing');
})
});
</script>

我已经完成了打开部分，但无法确定关闭部分以使徽标恢复到正常位置。请参阅jsfiddle

Answer 1

检查这个http://jsfiddle.net/Aveendra/t22NL/4/

    $(document).ready(function(){
        $(".button").click(function(){
            $(".topHidden").slideToggle();
            if($('.logo').attr('toggle')== '0'){
                $(".logo").animate({marginTop:'-50px'}, 1000, 'swing');
                $('.logo').attr('toggle','1');
            }else{
                $(".logo").animate({marginTop:'0px'}, 1000, 'swing');
                $('.logo').attr('toggle','0');
            }    
        })
    });

Answer 2

我已经编辑了你的 jquery 代码。这里是代码。

$(document).ready(function(){
        var switchtemp=0;
        $(".button").click(function(){
            $(".topHidden").slideToggle();
            if(switchtemp==0){
            $(".logo").animate({marginTop:'-50px'}, 1000, 'swing');
                switchtemp=1;
            }else{
            $(".logo").animate({marginTop:'0px'}, 1000, 'swing');
                switchtemp=0;
            }
        })
    });

在此处查看演示：http: //jsfiddle.net/59Shq/

Answer 3

你可以这样做：

$(".button").click(function(){
    $(".topHidden").slideToggle();
        var margin=$('.logo').css('margin-top');
        if(margin=='0px')
         $(".logo").animate({marginTop:'-50px'}, 1000, 'swing');
        else
         $(".logo").animate({marginTop:'0px'}, 1000, 'swing');   
})

演示小提琴