如果再次點擊按鈕，如何將動畫恢復到原始狀態？

現在它可能有點愚蠢的問題（可能是），但我不能包裹我的頭。所以我有一個橫向和縱向居中的導航欄，裏面有一個按鈕。如果您點擊該按鈕，導航欄會在頁面的頂部留下一點餘量來動畫。我試圖實現的是當按鈕被再次點擊時，導航欄會動畫回到它的原始位置。我已經嘗試了很多代碼，並且仍然無法正確（不應該那麼困難）。任何幫助表示讚賞。如果再次點擊按鈕，如何將動畫恢復到原始狀態？

的JavaScript：

$("#btn").click(function(event){ 
    $("#wrapper").animate({ 
     'top': 100 
    }, 400) 
});

CSS：

#wrapper { 
    position:absolute; 
    top:50%; 
    margin-top:-100px; 
    left:0; 
    width:100%; 
} 

#nav { 
    margin:20px auto; 
    height:200px; 
    width:900px; 
    text-align:center; 
    background-color:#bca; 
    border:1px solid green; 
}

JSFiddle here.

來源

2014-03-26 birdhouse

保存原始操作之前的狀態，再次點擊恢復狀態。 – alexmac

你可以使用類似的東西：

DEMO jsFiddle

$("#btn").click(function(event){ 
    this.toggle = !this.toggle; 
    $("#wrapper").stop().animate({ 
     'top': this.toggle?100:"50%" 
    }, 400) 
});

來源

2014-03-26 16:25:56

謝謝。完美地工作，就像adeneo發佈的那樣，但至少對我來說這看起來更簡單。 – birdhouse

您可以引入一個clicked變量，它可以告訴您它是否已被點擊或不是（或類似），然後在第一次點擊，向上移動，第二次點擊，向下移動等等。

JSFIDDLE LINK

var clicked = false; 
$("#btn").click(function(event){ 
    clicked = !clicked; 
    if(clicked) 
    { 
     $("#wrapper").animate({ 
      'top': '-=100' 
     }, 400) 
    } 
    else 
    { 
     $("#wrapper").animate({ 
      'top': '+=100' 
     }, 400) 
    } 
});

來源

2014-03-26 16:29:25 anothershrubery

這似乎並不能很好地發揮作用。導航欄不會移動到頁面的頂部。感謝您解釋它的工作原理。 :) – birdhouse

你可以做到這一點使用jQuery UI switchClass插件。或者通過更新您的代碼來達到難看的效果：

$("#btn").click(function(event) { 
    var top = $("#wrapper").css('top') == '100px' ? '50%' : 100; 
    $("#wrapper").animate({ 
     'top': top 
     }, 400) 
});

來源

2014-03-26 16:48:06 xiidea

如果再次點擊按鈕，如何將動畫恢復到原始狀態？

回答

相關問題