Затухание и скольжение одновременно?

У меня есть следующий script, который хорошо работает:

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

Он просто угасает элемент, а затем полностью удаляет его с экрана.

Я хочу немного улучшить эффект, сдвинув его вверх, пока он исчезает. Как мне это сделать?

Просто для того, чтобы прояснить, я не хочу, чтобы он исчезал, ТОГДА скользнул вверх или скользнул вверх. Затем погас, я хотел бы, чтобы он исчез, И в то же время, пока он исчезает, мне бы хотелось для выдвижения вверх.

Ответы

Ответ 1

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

Ответ 2

как насчет:

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

перейдет к непрозрачности 0 и высоте 0.

Подробнее здесь: http://api.jquery.com/animate/

Ответ 3

С jQuery .animate() вы можете манипулировать многими свойствами сразу - см. демо

Ответ 4

Чтобы избежать эффекта прыжка, не забывайте о заполнении и запасе. Команда jQuery не использует свойство 0. Вместо этого они используют значения "hide" и "show". например.

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

Ответ 5

вы можете использовать .animate функцию jquery

вы можете установить столько анимаций, сколько хотите.

передать непрозрачность как параметр, а также slideUp в качестве параметра

api.jquery.com/animate/

Ответ 6

Вы можете использовать . animate().

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