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个按钮，这种技术可行。另外，你永远不必在jQ函数的任何一行添加类似“.btn-24 ......”的内容。

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

Answer 4

怎么样：

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

一个接一个地动画两个分区

4 个答案: