Исчезать и скользить одновременно? - PullRequest
11 голосов
/ 21 июля 2011

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

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

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

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

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

Ответы [ 6 ]

17 голосов
/ 21 июля 2011
$(that)
    .parents(".portlet")
    .animate({height: 0, opacity: 0}, 'slow', function() {
        $(this).remove();
    });
4 голосов
/ 21 июля 2011

как насчет:

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

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

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

1 голос
/ 21 октября 2013

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

    $('#elementId').animate({
            opacity: 'hide',      // animate slideUp
            margin: 'hide',
            padding: 'hide',
            height: 'hide'        // animate fadeOut
        }, 'slow', 'linear', function() {
            $(this).remove(); 
        });
1 голос
/ 21 июля 2011

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

0 голосов
/ 21 июля 2011

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

$(that).parents(".portlet").animate({
    opacity: 0,
    height: 0
}, 'slow', 'linear', function() {
    $(that).parents(".portlet").remove();
});
0 голосов
/ 21 июля 2011

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

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

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

api.jquery.com / одушевленные /

...