0

我有一个由按钮组成的菜单。当我点击第一个按钮时，jquery UI 选项卡出现不透明度设置为 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 很陌生，任何帮助将不胜感激

4

4 回答 4

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...”的内容。

于 2013-02-20T15:49:18.163 回答
0

试试这个...

$(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()障碍，因为您不需要它们两个-您可以合二为一。然后我把第二个动画放到了第一个动画的回调函数中，所以它会等到第一个动画完成。

于 2013-02-20T15:08:12.837 回答
0

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'});   
        });
    });
});
于 2013-02-20T15:08:57.393 回答
0

怎么样：

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

于 2013-02-20T15:29:09.170 回答