Sử dụng jQuery .hide() với fading

Question

Tôi có chức năng .hide() ẩn divs dựa trên hộp kiểm.

JS Fiddle of it working here Real site example here

Tôi đang cố gắng để cho nó hoạt hình để các .hide() sẽ mờ dần vào/ra chứ không chỉ biến mất.

Cố gắng sử dụng các chức năng jQuery Fade nhưng như một tham số cho .hide() nhưng dường như không làm việc

$("div").click(function() { 
     $(this).hide("fade", {}, 1000); 
}); 

tôi đã cố gắng sử dụng điều này trong mã của tôi (xem JS Fiddle) như sau:

if(allSelected.length > 0){ 
      $("div.prodGrid > div:not(" + allSelected + ")").hide("fade", {}, 1000); 
     } 

Tôi sẽ làm gì sai?

Answer 1

$("div").click(function() { 
    $(this).fadeOut(1000); 
}) 

Ngoài ra còn có fadeIn và fadeToggle.

Answer 2

Bạn có thể sử dụng @ giải pháp Arnelle nếu bạn muốn fadeOut hoặc

thay $(this).hide("fade", {}, 1000); với

 $(this).hide("slow");//or $(this).hide(1000); 

đi "chậm" sẽ cung cấp cho một hình ảnh động đẹp trước khi trốn div của bạn.

Modified fiddle của bạn với những thay đổi: http://jsfiddle.net/Z9ZVk/8/

Answer 3

Hãy thử sử dụng fadeout với thời gian thay vì sử dụng ẩn.

if(allSelected.length > 0){ 
     $("div.prodGrid > div:not(" + allSelected + ")").fadeOut(1000); 
    } 

Working Fiddle

Answer 4

Tôi đã thử mã kiểm tra vào liên kết bên dưới, làm việc tốt của nó.

Using jQuery .hide() and .show() with fading - Live Demo

$("#btnHideShow").click(function() { 
      if ($("#btnHideShow").val() == "Hide") { 
       $("#imgHideShow").hide(1000); 
       $("#btnHideShow").attr("value", "Show"); 
      } 
      else { 
       $("#imgHideShow").show(1000); 
       $("#btnHideShow").attr("value", "Hide"); 
      } 
     }); 

Bạn cũng có thể tìm fadeIn, fadeOut, slideUp và slideDown Sử dụng Jquery từ thebelow liên kết.

fadeIn fadeOut and slideUp slideDown Effects Using Jquery