一個接一個地動畫兩個div

我有一個由按鈕組成的菜單。當我點擊第一個按鈕時，jquery UI Tab出現不透明度設置爲0.7。然後，當我點擊菜單中的第二個按鈕時，我希望第一個UI選項卡不透明度更改爲0，第二個UI選項卡與第一個UI相同。我在菜單中有4個按鈕，所以我希望這可以爲每個按鈕工作。一個接一個地動畫兩個div

$(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和任何幫助，將不勝感激

來源

2013-02-20 Space

試試這個...

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

我已經擺脫了之一塊，因爲你不需要它們兩個 - 你可以在一個。然後我將第二個動畫放入第一個動畫的回調函數中，所以它會一直等到第一個動畫完成。

來源

2013-02-20 15:08:12 Archer

不是當我打第一個按鈕，信息一出現，我打第二個按鈕，信息一消失，但信息二不出現。如果我再次點擊第一個按鈕，則會顯示info2，但不顯示任何css樣式。 – Space 2013-02-20 15:17:30

@DavidLavery現在試試:) – Archer 2013-02-20 16:25:25

查看的文檔或以任何教程。

解決方案：

$(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-20 15:08:57

如何：

$(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-20 15:29:09 roarster

似乎沒有工作，當我添加它時，屏幕上顯示的唯一的東西是我的背景顏色和菜單列表 – Space 2013-02-20 15:35:04

對不起@DavidLavery，我已經更新了代碼，看看現在是否可行 – roarster 2013-02-20 15:52:56

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-20 15:49:18 Dawson

一個接一個地動畫兩個div

回答

相關問題