Javascript Easing

Question

首先要感謝幫我解決問題。 Stackoverflow是一個很棒的社區。 也知道我對Javascript很新。

此問題涉及我正在構建的網站： http ： //www.thewanderingguru.com/m2world2/？portfolio = the-trout

將瀏覽器的寬度更改為小於960像素，以便顯示移動菜單。 現在單擊頁面右側的菜單圖標。 您將看到主菜單欄出現，左側的站點徽標在頁面上向下調整。

我的問題是如何讓徽標不“向上”跳躍。 我做了一些研究，發現我認為Jquery庫可以簡化轉換：比如這里，但我不確定如何在我的網站上實現它。 知道這個站點運行Wordpress。

單擊菜單圖標時，我將包含管理徽標類轉換的代碼。 '.ubermenu-skin-vanilla.ubermenu-responsive-toggle'是菜單圖標的類，單擊該圖標時，將“world”徽標的類別（div id ='＃logo'）從'logo1'更改為' LOGO2'

我嘗試添加CSS過渡，但這無助於緩解#logo div的跳躍。 我認為需要javascript緩動，但我不知道如何實現它。 再次感謝您的所有幫助和建議。

這是javascript：

<script type="text/javascript">jQuery(document).ready(function($) {$('.ubermenu-skin-vanilla.ubermenu-responsive-toggle').click(function(){$('#logo').toggleClass('logo1');$('#logo').toggleClass('logo2');});});</script>

這是我目前的CSS：

 @media only screen and (min-width: 0px) and (max-width:959px){ .logo1{ margin-top: 20px !Important; max-width: 90px !Important; transition: margin-top,max-width .7s ease-in-out !Important; -webkit-transition: margin-top,max-width .7s ease-in-out !Important; -o-transition: margin-top,max-width .7s ease-in-out !Important; -moz-transition: margin-top,max-width .7s ease-in-out !Important; } .logo2{ margin-top: 20px !Important; max-width: 90px !Important; transition: margin-top,max-width .7s ease-in-out !Important; -webkit-transition: margin-top,max-width .7s ease-in-out !Important; -o-transition: margin-top,max-width .7s ease-in-out !Important; -moz-transition: margin-top,max-width .7s ease-in-out !Important; } .logo2{ margin-top: 170px !Important; max-width: 90px !Important; transition: margin-top,max-width .7s ease-in-out !Important; -webkit-transition: margin-top,max-width .7s ease-in-out !Important; -o-transition: margin-top,max-width .7s ease-in-out !Important; -moz-transition: margin-top,max-width .7s ease-in-out !Important; } } 

PS。 我知道在我的CSS中我使用了很多'！重要'這不是最佳實踐，但我正在使用的主題不斷覆蓋我的代碼，除非我這樣做。 謝謝！

Answer 1

transition: margin-top,max-width .7s ease-in-out !Important;

您正在將transition屬性應用於兩個屬性，但僅指定一個持續時間（等）。 這就是Firefox解釋的方式：

注意第一個持續時間總是0s ？ 這就是問題（首先要考慮調試器和CSS分析器等）！

幸運的是，Firefox還以一種我們知道如何更改語法並正確應用值的方式重新格式化屬性：

transition: margin-top .7s ease-in-out,max-width .7s ease-in-out !important;

現在兩個過渡屬性都有持續時間，並且都具有定時功能。 將此應用於您使用多個轉換屬性的所有規則，並且轉換至少有效。 現在你只需稍微調整一下這些值就可以了。

另外：它是!important ，不是!Important 。

Answer 2

您可以通過傳遞表示動畫毫秒數的附加參數來調用toggleClass時設置動畫的持續時間。

而不是打電話：

<script type="text/javascript">jQuery(document).ready(function($) {$('.ubermenu-skin-vanilla.ubermenu-responsive-toggle').click(function(){$('#logo').toggleClass('logo1');$('#logo').toggleClass('logo2');});});</script>

試着用類似的東西

<script type="text/javascript">jQuery(document).ready(function($) {$('.ubermenu-skin-vanilla.ubermenu-responsive-toggle').click(function(){$('#logo').toggleClass('logo1',1000);$('#logo').toggleClass('logo2', 1000);});});</script>