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

这是一个更明确的问题：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

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

1 个答案: