jquery動畫在首次運行時無法正常工作

Question

這是代碼： jsfiddle上的代碼。 在第一次運行時，它不顯示“slideDown”動畫，但隨后的時間它可以正常工作。

$("#more-news") .click(function() {
   $(".news-hide") .slideDown('slow').removeClass("hide");
});

Answer 1

使用以下內容。

$("#more-news").click(function() {
    //changed the line below.
    $(".news-hide").hide().removeClass('hide').slideDown('slow');
    $("#less-news").fadeIn('slow').removeClass("hide");
    $("#more-news").fadeOut().addClass("hide");
});

DEMO

Answer 2

您可以像這樣使用，而不是使用多個元素和多個事件，

$("#more-news").click(function() {
  var button = $(this)
  $(".news-hide").slideToggle(function() {
    $(".news-hide").is(":visible") ? button.text("Less News") : button.text("More News")
  });
});

小提琴

Answer 3

引導程序隱藏類與jQuery隱藏功能的工作方式不同，從而產生令人困惑的結果。

要在隱藏它們之前對它們進行jQuerify，你可以做一些像這樣的事情：

$('.hide').hide().removeClass('hide');

$("#more-news") .click(function() {
    $(".news-hide") .slideDown('slow');
});

現在，每次執行某些操作時，您都不必擔心隱藏類，但是在文檔准備好javascript本身之前，它會保持隱藏狀態。