一个接一个地设置两个Div的动画

Question

我有一个由按钮组成的菜单。当我点击第一个按钮时，出现一个jquery UI Tab，不透明度设置为0.7。然后，当我点击菜单中的第二个按钮时，我希望第一个UI选项卡不透明度更改为0，并且第二个UI选项卡显示为与第一个相同。我有4个按钮在我的菜单，所以我会希望这每一个工作。

$(document).ready(function(){
  $("#bt1").click(function(){
    $("#info1").animate({opacity:'0.7'});   
 });
});


$(document).ready(function(){
  $("#bt2").click(function(){
    $("#info1").animate({opacity:'0'}); 
    $("#info2").animate({opacity:'0.7'});   
 });
});

HTML

<div id="info1" class="info">
<div id="tabs"> 
<ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1"><p></p></div>
<div id="tabs-2"><p></p></div>
<div id="tabs-3"><p></p></div>
</div>

<div id="info2" class="info">

<div id="tabs">

<ul>
    <li><a href="#tabs-1">Fourth</a></li>
    <li><a href="#tabs-2">Fifth</a></li>
    <li><a href="#tabs-3">Sixth</a></li>
</ul>
<div id="tabs-1"><p>    </p></div>
<div id="tabs-2"><p>    </p></div>
<div id="tabs-3"><p>    </p></div>

​

我是jQuery的新手，任何帮助我都将不胜感激

Answer 1

HTML

<div id="nav">
    <ul>
        <li><a class="btn current" href="">Home</a></li>
        <li><a class="btn" href="">About</a></li>
        <li><a class="btn" href="">Info</a></li>
        <li><a class="btn" href="">Contact</a></li>
    </ul>
</div>

jQuery

$(".btn").click(function() {
    $('.btn').removeClass('current');
    $(this).addClass('current').animate({opacity:1}, function() {
        $('.btn:not(.current)').animate({opacity:0.7})
    });
    return false;
});

jsFiddle演示：http://jsfiddle.net/9APzE/

这个想法很简单:1个类代表“默认”状态(.btn)，1个类代表“突出显示”状态(.current)。你可以有24个按钮，这种技术是可行的。此外，您永远不需要添加类似".btn-24...“的内容。添加到jQ函数的任何行。

Answer 2

试试这个吧。

$(document).ready(function(){
    $("#bt1").click(function(){
        $("#info1").animate({opacity:'0.7'});
    });
    $("#bt2").click(function(){
        $("#info1").animate({opacity:'0'}, 400, "swing", function() {
            $("#info2").animate({opacity:'0.7'});
        });
    });
});

我已经去掉了其中一个$(document).ready()块，因为你不需要这两个块--你可以在一个块中完成。然后我将第二个动画放入第一个动画的回调函数中，所以它将等待第一个动画完成。

Answer 3

http://api.jquery.com/animate/

请参见文档或任何教程中的。

解决方案：

$(document).ready(function(){
        $("#bt2").click(function(){
            //Start first animation.
            $("#info1").animate({opacity:'0'},
                /*on Animation Ends in the future*/
                function () {
                    //Start second animation.
                    $("#info2").animate({opacity:'0.7'});   
        });
    });
});