如何在類使用jQuery更改時將動畫添加到元素的css屬性？

問題：如何在類使用jQuery更改時將動畫添加到元素的css屬性？

我有具有類hidden其設置的CSS屬性display: none;一個HTML元素。當我使用JS去除類時，元素立即可見（原始display值已恢復）。我希望能夠設置「展示」動畫的持續時間，例如我可以：$('.hidden').show(1000)或$('.hidden').fadeIn(1500)。我試圖鏈接.animate()，但它沒有奏效。

侷限性

它不能與元素的內聯CSS混亂（特別是它不能設置display: block）
也應做類似jQueryUI的removeClass：http://jqueryui.com/removeClass/

問題：

如何在I 刪除（更改）HTML元素的類時進行動畫更改（持續時間> 0）？

代碼：

CSS：

.hidden{ 
display: none; 
}

HTML

<div class="hidden"> Lorem ipsum </div>

$('.hidden').removeClass('hidden')

來源

2013-06-26 MythThrazz

$('.hidden').show(1000,function(){$(this).removeClass('hidden').css('display','');});

這將使用動畫顯示出來，一旦動畫完成，我們刪除類...

來源

2013-06-26 11:30:28 Salketer

我試過了，不幸的是它集的醜陋的直列'風格=「顯示：塊」'我不能讓。 – MythThrazz

爲你修復 – Salketer

您刪除，你需要消除它那是錯誤的類

你可以試試這個 Example

HTML

<h1 class="hide" style="display:none; ">Display</h1>

$(function() { 
$(".hide").fadeIn('slow'); 
});

來源

2013-06-26 11:34:58

我不想使用內聯CSS樣式 - 我不能，我發現它們很難看。我搜索的解決方案應該是純JS/jQuery。 – MythThrazz

我更新了示例 –

爲什麼你不能使用$('.hidden').fadeIn(1500)？

JSFiddle

來源

2013-06-26 11:44:35 kapricanon

因爲它將內聯樣式設置爲'display：block'，這在我的設置中是錯誤的。我會更新這個問題，讓它更具體。 – MythThrazz

如果你需要這個動畫在現代瀏覽器，使用CSS過渡跑！

.hidden{ 
    display: none; 
} 
.hidden.fadeIn{ 
    display: block; 
    opacity:0; 
    visibility:hidden; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 
.hidden.fadeIn.do{ 
    opacity:1; 
    visibility:visible; 
}

在JS，你可以設置類是這樣的：

$('.hidden').addClass('fadeIn'); 
setTimeout(function(){$('.hidden.fadeIn').addClass('do');},10);

不幸的是，除非你將不得不使用setTimeout。如果你不這樣做，這兩個班級的變化將被同時解釋，並且不會出現動畫。

編輯

你也許能夠用更少的代碼，如果你修改hidden類的規則：

.hidden{ 
    display: none; 
    opacity:0; 
    visibility:hidden; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 
.hidden.fadeIn{ 
    display: block; 
    opacity:1; 
    visibility:visible; 
}

現在你只有1級與JS補充：

function fade(){ 
    $('.hidden').addClass('fadeIn'); 
} 
setTimeout(fade,10);

來源

2013-06-26 11:57:57

感謝您的詳細解答。稍後會檢查。 CSS轉換看起來很有希望。 – MythThrazz

http://jsfiddle.net/DU2Wg/1/

隨着你的HTML CSS &，您可以使用此JS：

$('.hidden') 
    .css({ // Change your CSS directly to 
      'display':'inline', // the display you want 
      'opacity':0 // from opacity 0 
    }) 
    .animate({ // Will change your CSS over time 
      opacity:1 // to opacity 1 
      }, 
      2000, // in 2 secs 
      function(){ 
       $(this).removeClass('hidden'); // will remove your class (only if you want to use it once 
       alert($(this).css('display')); // will alert "inline", your current display on that element 
      } 
    );

來源

2013-06-26 12:28:53 Shikiryu

如何在類使用jQuery更改時將動畫添加到元素的css屬性？

回答

相關問題