jquery - 淡出并同时向上滑动？

Question

我有以下运行良好的脚本：

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

它只是淡出元素，然后将其完全从屏幕上删除。

我想通过在淡出时向上滑动来稍微改善效果。我该怎么做？

澄清一下，我不希望它淡出然后向上滑动，或者向上滑动然后淡出，我希望它淡出，同时在淡出的同时，我希望它向上滑动.

Answer 1

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

Answer 2

关于什么：

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

将转到不透明 0 和高度 0。

在此处了解更多信息：http: //api.jquery.com/animate/

Answer 3

使用 jQuery .animate()，您可以一次操作多个属性 - 请参阅演示

Answer 4

为了避免跳跃效应，不要忘记填充和边距。jQuery-Team 不使用属性 0。相反，他们使用值“隐藏”和“显示”。例如

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

Answer 5

你可以使用jquery的.animate函数

您可以根据需要设置任意数量的动画。

传递 opacity 作为参数 & 也将 slideUp 作为参数

api.jquery.com/animate/

Answer 6

您可以使用.animate()。

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