Jquery 一个接一个地设置两个div的动画

我有一个由按钮组成的菜单。当我点击第一个按钮时，jQueryUI选项卡出现，不透明度设置为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

我对jQuery非常陌生，如果有任何帮助，我将不胜感激

试试这个

$(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（）

块中的一个，因为您不需要这两个块—您可以在一个块中完成。然后我将第二个动画放入第一个动画的回调函数中，因此它将等待第一个动画完成。

请参阅文档或任何教程中的

解决方案：

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

那么：

$(document).ready(function(){
$("#bt1, #bt2, #bt3, #bt4").click(function(){
   Var id = $(this).attr("id").substring(2);
$("#info1, #info2, #info3, #info4").animate({opacity:'0'},
function () {
$("#info"+id).animate({opacity:'0.7'});
});

});

这样，它适用于所有四个按钮，以及应用回调

编辑

$(document).ready(function(){
$("#bt1, #bt2, #bt3, #bt4").click(function(){
Var id = $(this).attr("id").substring(2);
$(".current").removeClass('current');
$("#info"+id).addClass('current').animate({opacity:'0.7'});
$("#info1, #info2, #info3, #info4").not('.current').animate({opacity:'0'});   
});

可以更好地满足您的需要（它将同时为旧的输出和新的输入设置动画，并且不需要您更改html）

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>

JSFIDLE演示：

---

想法很简单：1个类表示“默认”状态（.btn），1个类表示“突出显示”状态（.current）。你可以有24个按钮，这项技术很管用。另外，您永远不必在jQ函数的任何行中添加“.btn-24…”之类的内容。

当我点击第一个按钮时，信息一出现，我点击第二个按钮，信息一消失，但信息二没有出现。如果我再次点击第一个按钮“信息一显示”和“信息二显示”，但没有任何css样式。@DavidAvery现在试试：）似乎不起作用，当我添加它时，屏幕上唯一显示的是我的背景颜色和菜单列表抱歉@DavidAvery，我已经更新了代码，看看现在是否有效

<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>

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