CODEWITHSUNDEEP
javascriptjqueryhtml
ZaitseV
ZaitseV

Reputation: 179

jquery animation doesn't work properly on first run

this is the code: code on jsfiddle. On the first run it doesn't show the "slideDown" animation but subsequent times it works fine.

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

Upvotes: 5

Views: 167

Answers (3)

Tim Ogilvy
Tim Ogilvy

Reputation: 1973

The bootstrap hide class doesn't quite work the same way as the jQuery hide function, creating a confusing result.

To jQuerify your hidden things before sliding them around, you can do something a little like this:

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

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

Now you don't have to worry about that hide class every time you do something, but it keeps things hidden until the document is ready to javascript itself.

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

Instead of using multiple elements and multiple events, you can use like this,

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

Fiddle

Upvotes: 4

rrk
rrk

Reputation: 15875

Use the following.

$("#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

Upvotes: 4

Related Questions