L'animazione jQuery non funziona correttamente alla prima esecuzione

Question

questo è il codice: code on jsfiddle. Alla prima esecuzione non mostra l'animazione "slideDown" ma le volte successive funziona correttamente.

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

Answer 1

Utilizzare quanto segue.

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

Invece di utilizzare più elementi ed eventi multipli, è possibile utilizzare in questo modo,

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

La classe di bootstrap nascondere abbastanza non funziona lo stesso come la funzione jQuery hide, creando un risultato confuso.

Per jQeuerify tuoi thangs nascosti prima di scivolare in giro, si può fare qualcosa di un po 'come questo:

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

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

Ora non c'è bisogno di preoccuparsi che nascondere classe ogni volta che fate qualcosa, ma mantiene le cose nascoste fino a quando il documento è pronto per javascript stesso.