Khả năng hiển thị mờ dần của phần tử bằng cách sử dụng jQuery

Question

Tôi đang gặp một số sự cố khi tìm thông số hiển thị cho JQuery.

Về cơ bản ... mã bên dưới không làm gì cả.

$('ul.load_details').animate({ 
    visibility: "visible" 
    },1000); 

Không có gì sai với mã Animate là (tôi đã thay thế tầm nhìn với fontSize và nó là tốt. Tôi chỉ dường như không thể tìm ra tên param đúng tương đương cho "tầm nhìn" trong css.

Answer 1

Bạn có thể đặt độ mờ thành 0.0 (tức là "Vô hình") và tầm nhìn để có thể nhìn thấy (để làm cho opacity có liên quan), sau đó animate opacity 0,0-1,0 (mờ dần nó trong):

$('ul.load_details').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}); 

Bởi vì bạn Opacity là 0.0, nó là vô hình mặc dù là đặt thành "hiển thị". Các hình ảnh động opacity nên cung cấp cho bạn fade-in bạn đang tìm kiếm.

Hoặc, tất nhiên, bạn có thể sử dụng các hoạt ảnh .show() hoặc .fadeTo().

EDIT: Volomike là chính xác. CSS của khóa học xác định rằng opacity có giá trị từ 0,0 đến 1,0, không phải từ 0 đến 100. Cố định.

Answer 2

này . có thể giúp:

$(".pane .delete").click(function(){ 
    $(this).parents(".pane").animate({ opacity: 'hide' }, "slow"); 
}); 

Answer 3

Bạn không thể animate visibility hoặc một cái gì đó có thể nhìn thấy, hoặc nó không (sự kiện 1% mục đục là 'nhìn thấy') nó giống như một nửa tồn tại - không có ý nghĩa.. Bạn có thể làm tốt hơn việc làm mờ opacity (thông qua .fadeTo() v.v.)

Answer 4

Có lẽ bạn chỉ muốn hiển thị hoặc ẩn một phần tử:

$('ul.load_details').show(); 
$('ul.load_details').hide(); 

Hoặc bạn có muốn hiển thị/ẩn các yếu tố sử dụng hình ảnh động (điều này không có ý nghĩa dĩ nhiên là nó sẽ không phai):

$('ul.load_details').animate({opacity:"show"}); 
$('ul.load_details').animate({opacity:"hide"}); 

Hoặc bạn có muốn thực sự fade-in các yếu tố như thế này:

$('ul.load_details').animate({opacity:1}); 
$('ul.load_details').animate({opacity:0}); 

có lẽ một hướng dẫn tốt đẹp sẽ giúp bạn có được lên đến tốc độ với jQuery:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Answer 5

Đây là những gì làm việc cho tôi (dựa trên @Alan's answer)

 var foo = $('ul.load_details'); // or whatever 
     var duration = "slow"; // or whatever 

     if (foo.css('visibility') == 'visible') { 
      foo.css({ opacity: 1 }).animate({ opacity: 0 }, duration, function() { 
       foo.css({ visibility: "hidden" }); 
      }); 
     } else { 
      foo.css({ opacity: 0 }).animate({ opacity: 1 }, duration).css({ visibility: "visible" }); 
     } 

Khi các yếu tố foo có thể nhìn thấy, sau đó từ từ giảm opacity xuống còn zero (thông qua animate) và sau đó đợi cho đến khi thực hiện xong trước khi đặt chế độ hiển thị của foo bị ẩn. Nếu không, nếu được đặt thành ẩn trong quá trình animate thì hiệu ứng mờ dần sẽ không xảy ra vì nó bị ẩn ngay lập tức.

Ngoài ra, bạn có thể sử dụng đơn giản hơn, sạch hơn fadeTo():

 var foo = $('ul.load_details'); // or whatever 
     var duration = "slow"; // or whatever 

     if (foo.css('visibility') == 'visible') { 
      foo.fadeTo(duration, 0, function() { 
       foo.css({ visibility: "hidden" }); 
      }); 
     } else { 
      foo.fadeTo(duration, 1).css({ visibility: "visible" }); 
     }