Làm mờ và trượt lên cùng một lúc?

Question

Tôi có kịch bản sau đó hoạt động tốt:

$(that).parents(".portlet").fadeOut('slow', function() { 
    $(that).parents(".portlet").remove(); 
}); 

Nó chỉ mất dần ra phần tử, sau đó loại bỏ nó hoàn toàn khỏi màn hình.

Tôi muốn cải thiện một chút hiệu ứng bằng cách trượt nó lên trong khi nó đang mờ dần. Tôi sẽ làm như thế nào?

Chỉ cần làm rõ, tôi không muốn nó phai ra THEN trượt lên, hoặc trượt lên THEN phai ra, tôi muốn nó mờ đi, VÀ đồng thời trong khi nó đang mờ dần, tôi muốn nó trượt lên.

Answer 1

$(that) 
    .parents(".portlet") 
    .animate({height: 0, opacity: 0}, 'slow', function() { 
     $(this).remove(); 
    }); 

Answer 2

gì về:

$('#clickme').click(function() { 
    $('#book').animate({ 
    opacity: 0, 
    height: '0' 
    }, 5000, function() { 
    // Animation complete. 
    }); 
}); 

sẽ đi đến opacque 0 và chiều cao 0.

Tìm hiểu thêm ở đây:

Answer 3

bạn có thể sử dụng chức năng của .animate jquery

bạn có thể đặt nhiều hình động như bạn muốn.

qua opacity như tham số & cũng slideUp như tham số

api.jquery.com/animate/

Answer 4

Bạn có thể sử dụng .animate().

$(that).parents(".portlet").animate({ 
    opacity: 0, 
    height: 0 
}, 'slow', 'linear', function() { 
    $(that).parents(".portlet").remove(); 
}); 

Answer 5

Với jQuery .animate(), bạn có thể thao tác nhiều tài sản cùng một lúc - xem demo

Answer 6

Để tránh nhảy hiệu ứng đừng quên về đệm & lề. Nhóm jQuery không sử dụng thuộc tính 0. Thay vào đó, chúng sử dụng các giá trị 'ẩn' & 'hiển thị'. ví dụ.

$('#elementId').animate({ 
      opacity: 'hide',  // animate slideUp 
      margin: 'hide', 
      padding: 'hide', 
      height: 'hide'  // animate fadeOut 
     }, 'slow', 'linear', function() { 
      $(this).remove(); 
     });