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

我已经编辑了你的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 2

你可以这样做：

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

演示Fiddle

Answer 3

选中此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');
            }    
        })
    });

带有徽标动画的jQuery slideToggle

3 个答案: