使用 jquery 在第二次单击时反转动画

Question

我有三个框，其中包含我想用我已经编码的特定动画打开的信息。我已经编写了所有内容，当单击一个时，其他的会关闭，但是我似乎无法弄清楚当您第二次单击名称时如何关闭该框，我不知道为什么，但是尝试时切换事件不起作用。知道我该怎么做吗？这是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/

Answer 1

如果您在 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');
}

DEMO