jQuery動畫擴展和使用正確的屬性合同

我有一個頁面上的2個框，一個擴展到右邊的動畫，當你按下一個藍色的框。藍色框變成紅色框，它應該是它恢復到其原始大小（寬度）和位置的按鈕。（第二個盒子應該保持在右上角。）一旦它再次收縮到原始尺寸，按鈕應該變回藍色，並且過程可以再次開始，所以擴展和收縮可以繼續進行。jQuery動畫擴展和使用正確的屬性合同

$(document).ready(function() { 

//open & close 1 //open & close 2... (irrelevant code omitted here, just some extra buttons) 

//minimise 1 
$(".minT").click(function() { 
    $('.box1').animate({right:'+=49.5%'}, "slow"); 
}); 
//change minimise to expand 
$(".minT").click(function() { 
$('.minT').removeClass('minT').addClass('expT'); 
}); 

//expand 1 & close 2 
$(".expT").click(function() { 
    $('.box2').animate(
    {width:'20px', 
    height:'20px', 
    right:'75px', 
    top:'5px', 
    bottom:'show', 
    left:'90%'}, "fast", function(){ 
     $('.box1').animate({right:'-=49.5%'}, "slow", function(){ 
});});}); 
//change expand button to a minimise button 
$(".expT").click(function() { 
$('.expT').removeClass('expT').addClass('minT'); 
}); 
});

我不知道我必須做的，它的工作......我試着在儘量減少代碼段正確的價值擺弄，但它似乎並不喜歡它，只是擴大越來越多。（我也將擴展值設置爲正確的：'1％'，它將它放到相同的位置，但當我點擊紅色框時，它不會做任何事情。）這可能是我改變的類從expT to minT？

這裏有一個鏈接一起玩：

http://jsfiddle.net/c7SLV/1/

感謝您的幫助，您可以給我提前！

Pbob

來源

2014-02-26 patwick600akabob

所以唯一的問題是不斷擴大而不是回到原來的大小？ – user1795832

@ user1795832是的，它應該能夠合同，然後能夠再次擴大和可互換 – patwick600akabob

你必須unbind("click")當你刪除類。在刪除它並添加新類之後，它仍然在執行舊類的單擊事件。我更新了小提琴

$(".expT").click(function() { 
     $('.expT').removeClass('expT').unbind("click").addClass('minT').click(function(){ 
      $('.box1').animate({right:'+=49.5%'}, "slow"); 
     }); 
});

這得到box1恢復到原來的大小。

來源

2014-02-26 01:58:55 DFord

不錯，謝謝！儘管在點擊minT時它應該變回expT類。 http://jsfiddle.net/c7SLV/4/ – patwick600akabob

這是新的小提琴，它擴大和收縮，並再次擴大 - http://jsfiddle.net/c7SLV/4/ – DFord

沒有爲我工作@DFord – patwick600akabob

jQuery動畫擴展和使用正確的屬性合同

回答

相關問題