0

既にコーディングした特定のアニメーションで開きたい情報が入った 3 つのボックスがあります。1 つがクリックされると他のものが閉じるようにすべてをコーディングしましたが、名前を 2 回目にクリックしたときにボックスを閉じる方法がわかりません。理由はわかりませんが、試してみると、トグルイベントが機能しません。どうすればこれを行うことができますか？jqueryコードは次のとおりです。

$('.link').click(function(){
        $('#box').animate({
            marginLeft:"0px",
            marginTop:"100px"
            },500).addClass('navigation').animate({
            width:"260px",
            height:"80px"
        },500);
        $('#box2').animate({
            marginLeft:"100px",
            marginTop:"0px",
            width:"60px",
            height:"23px"
            },500).removeClass('navigation');
        $('#box3').animate({
            marginLeft:"200px",
            marginTop:"0px",
            width:"60px",
            height:"23px"
            },500).removeClass('navigation')
    });    
    $('.link2').click(function(){
        $('#box2').animate({
            marginLeft:"0px",
            marginTop:"100px"
            },500).addClass('navigation').animate({
            width:"260px",
            height:"80px"
        },500);
        $('#box').animate({
            marginLeft:"0px",
            marginTop:"0px",
            width:"60px",
            height:"23px"
            },500).removeClass('navigation');
        $('#box3').animate({
            marginLeft:"200px",
            marginTop:"0px",
            width:"60px",
            height:"23px"
            },500).removeClass('navigation');
    });  
    $('.link3').click(function(){
        $('#box3').animate({
            marginLeft:"0px",
            marginTop:"100px"
            },500).addClass('navigation').animate({
            width:"260px",
            height:"80px"
        },500);
        $('#box2').animate({
            marginLeft:"100px",
            marginTop:"0px",
            width:"60px",
            height:"23px"
            },500).removeClass('navigation');
        $('#box').animate({
            marginLeft:"0px",
            marginTop:"0px",
            width:"60px",
            height:"23px"
            },500).removeClass('navigation');    
    });

そして、これをより明確にするためのjsfiddleがあります：http://jsfiddle.net/Unphr/11/

4

1 に答える 1

3

DOMで少し名前を変更すると、このプロセスのより一般的なハンドラーを作成できます。

次のHTMLブロックへの重要な追加は、boxクラスがすべてのボックスコンテナに追加されたことです。

HTML

<div id="container">
    <div id="box1" class="box" align="center">
        <div id="link1" class="link"><a> Info </a></div>
    </div>
    <div id="box2" class="box" align="center">
        <div id="link2" class="link"><a> Links </a></div>
    </div>
    <div id="box3" class="box" align="center">
    <div id="link3" class="link"><a> More </a></div>
    </div>
</div>

次のJSは、基本的に、それぞれに特別に定義されたアニメーションに依存しないようにリファクタリングされたコードですbox。これを行うために、jQuery.data()メソッドを利用して、後で使用するためにDOMに情報を格納します（この場合、ボックスの左マージン）。

JS

$('.box').click(function() {
    // Get the associated box
    var box = $(this).closest('.box');
    // Get the other boxes
    var otherBoxes = $('.box').not(box);
    // If the box is already active
    if (box.hasClass('active')) {
        // Animate the box out
        animateBoxOut(box);
    } else {
        // Get the original left margin
        var marginLeft = box.css('margin-left');
        // Store the original left margin
        box.data('marginLeft', marginLeft);
        // Animate the box in
        animateBoxIn(box);
        // Animate the other boxes out
        otherBoxes.each(function(index, element) {
            animateBoxOut(element);
        });
    }
});

function animateBoxIn(box) {
    // Animate the box in
    $(box).addClass('active').animate({
        marginLeft:"0px",
        marginTop:"100px"
    },500).animate({
        width:"260px",
        height:"80px"
    });
}

function animateBoxOut(box) {
    // Get the element's stored left margin
    var marginLeft = $(box).data('marginLeft');
    // Animate the box out
    $(box).animate({
        marginLeft:marginLeft,
        marginTop:"0px",
        width:"60px",
        height:"23px"
    },500).removeClass('active');
}

デモ

于 2013-03-14T01:16:57.967 に答える