0

ボタンで構成されたメニューがあります。最初のボタンを押すと、jqueryUIタブが表示されます。不透明度は0.7に設定されています。次に、メニューの2番目のボタンを押すと、最初のUIタブの不透明度を0に変更し、2番目の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

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()両方は必要ないので、ブロックの 1 つを削除しました。次に、2 番目のアニメーションを 1 番目のアニメーションのコールバック関数に入れるので、1 番目のアニメーションが完了するまで待機します。

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

});

そうすれば、4 つのボタンすべてに対して機能し、コールバックを適用することもできます。

編集

$(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 に答える