hoạt ảnh jquery không hoạt động bình thường trên lần chạy đầu tiên

Question

đây là mã: code on jsfiddle. Trong lần chạy đầu tiên, nó không hiển thị hoạt ảnh "slideDown" nhưng lần sau nó hoạt động tốt.

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

Answer 1

Sử dụng như sau.

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

Thay vì sử dụng nhiều yếu tố và nhiều sự kiện, bạn có thể sử dụng như thế này,

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

Các bootstrap ẩn lớp không hoàn toàn làm việc như nhau cách thức như chức năng ẩn jQuery, tạo ra một kết quả khó hiểu.

Để jQeuerify thangs ẩn của bạn trước khi trượt xung quanh, bạn có thể làm một chút gì đó như thế này:

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

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

Bây giờ bạn không cần phải lo lắng về điều đó ẩn lớp mỗi khi bạn làm điều gì đó, nhưng nó giữ mọi thứ ẩn cho đến khi tài liệu sẵn sàng để tự javascript.