如何切換動畫div？

我試着安裝Jquery UI，這樣我可以很容易地將動畫添加到toggleClass函數中，但它只在添加類時動畫，而不在刪除類時（或向左移回原始位置）。如何切換動畫div？

jQuery('#menu').click(function() { 
    jQuery('#wrap').toggleClass('move-right', 1000); 
    });

CSS

#wrap { 
    position: relative; 
    bottom: 22px; 
    max-width: 1150px; 
    margin: 0 auto; 
    padding: 20px; 
} 

.move-right { 
    left: 9%; 
}

所以，我怎麼能得到這個動畫兩種方式？

這只是一個簡單的幻燈片向右，然後左轉。我認爲jQuery用戶界面將是最簡單的，但如果我不需要它甚至更好

來源

2014-03-26 user3427494

這似乎是工作：http://jsfiddle.net/aT5RM/ – Alethes

添加左側位置，以#wrap

然後改變你的.move-right選擇更具體

#wrap { 
    position: relative; 
    bottom: 22px; 
    max-width: 1150px; 
    margin: 0 auto; 
    padding: 20px; 
    left:0; 
} 

#wrap.move-right { 
    left: 9%; 
}

http://jsfiddle.net/TrcLy/

來源

2014-03-26 20:39:57

由於它的工作！ – user3427494

你可以通過使用布爾值來嘗試它，如果布爾值爲true，嘗試以另一種方式移動它。那麼你的代碼應該是這樣的：

JS：

var right = false; 
jQuery('#menu').click(function() { 
    if(!right) { 
    jQuery('#wrap').toggleClass('move-right', 1000); 
    right = true; 
    } else if(right) { 
    jQuery('#wrap').toggleClass('move-left', 1000); 
    right = false; 
    } 
});

CSS：

#wrap { 
    position: relative; 
    bottom: 22px; 
    max-width: 1150px; 
    margin: 0 auto; 
    padding: 20px; 
} 

.move-right { 
    left: 9%; 
} 

.move-left { 
    right: 9%; 
}

這基本上檢查是否 '包裝' 已在點擊按鈕向右移動。如果不是，則將其移至右側，否則移至左側。

來源

2014-03-26 20:41:16

謝謝，但它是越野車。本來應該沒有刪除類。謝謝你的努力，非常感謝！ – user3427494

您可以使用CSS3過渡來定義過渡屬性（左）和時間（1s），請參閱：http://jsfiddle.net/m3sEn/1/這不需要jQuery UI。

CSS：

#wrap { 
    left: 0; 
    transition: left 1s; 
} 

#wrap.move-right { 
    left: 9%; 
}

來源

2014-03-26 20:50:37 Sarah

如何切換動畫div？

回答

相關問題