Question

这是代码：code on 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")
  });
});

Fiddle

Answer 3

引导程序隐藏类的工作方式与jQuery隐藏功能完全相同，从而产生了令人困惑的结果。

要在隐藏的东西滑动之前对你进行jQuerify，你可以做一些像这样的事情：

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

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

现在，每当你做某事时，你都不必担心这个隐藏类，但它会保持隐藏状态直到文档准备好javascript本身。

jquery动画在首次运行时无法正常工作

3 个答案: