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

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

デモフィドル

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