jQuery: FadeOut then SlideUp

Если элемент удаляется, я хотел бы его погасить и сдвинуть остальные элементы, чтобы заполнить пустое пространство. Теперь, когда я использую fadeOut(), элемент не имеет высоты в конце, что приводит к тому, что другие предметы подпрыгивают (вместо того, чтобы скользить вверх хорошо).jQuery: FadeOut then SlideUp

Как я могу slideUp() и элемент сразу после fadeOut()?

источник

2009-04-09 bart

я переписал мое, так что это переключение в настоящее время. – Powerlord

Следует отметить, что причина, по которой fadeOut вызывает скачок, заключается в том, что после того, как непрозрачность анимирована до 0, на дисплее установлено значение none. fadeTo не делает этого, поэтому решения работают ниже. –

jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) { 
    if (this.is(":hidden")) { 
    return this.slideDown(speed, easing).fadeTo(speed, 1, easing, callback); 
    } else { 
    return this.fadeTo(speed, 0, easing).slideUp(speed, easing, callback); 
    } 
};

Я тестировал его на JQuery 1.3.2, и он действительно работает.

Редактировать: Код, из которого я его вызываю. # Слайд-то фейдерное это идентификатор кнопки элемента, статья-текст представляет собой класс на сОн теге:

$(document).ready(function() { 
    $('#slide-then-fade').click(function() { 
    $('.article-text').fadeThenSlideToggle(); 
    }); 
});

Edit 2: Модифицированный использовать встроенный slideUp.

Edit 3: переписан как переключатель, и используя fadeTo

источник

2009-04-09 15:31:29 Powerlord

Мне пришлось отказаться от параметра «easing», чтобы заставить «callback» работать. – bart

А, ОК. Насколько я помню, слайды и затухания имеют разные аргументы для ослабления, поэтому аргумент ослабления в любом случае бесполезен. – Powerlord

Можно ли сделать это вложенным? Я пробовал это> http://jsfiddle.net/59CQf/2/, но он не работает – deathlock

Не можете ли вы его связать?

$('myelement').fadeOut().slideUp();

EDIT:

this Может поможет, а?

источник

2009-04-09 14:48:21 Kezzer

Нет, он никуда не исчезает, а затем делает жесткий шаг на элементе DOM. –

А я вижу, это боль. – Kezzer

Нет, он вскакивает в конец fadeOut(). – bart

-1

Функция FADEOUT принимает второй необязательный аргумент функции обратного вызова, так что вы должны быть в состоянии сделать что-то вроде этого:

$('elementAbove').fadeOut(500, function() { 
    $('elementBelow').slideUp(); 
});

EDIT: забыл добавить скорость FADEOUT в качестве первого параметра

источник

2009-04-09 15:02:47

Он все еще вскакивает :( – bart

Что такое HTML и CSS, которыми вы управляете? –

это не работает, потому что вы эссеально сделали то же самое, что и цепочка.вам нужно сначала угаснуть до 1%, а затем свернуться с –

Похоже, было бы лучше использовать JQuery fadeTo команду

$(function() { 

    $("#myButton").click(function() { 
     $("#myDiv").fadeTo("slow", 0.00, function(){ //fade 
      $(this).slideUp("slow", function() { //slide up 
       $(this).remove(); //then remove from the DOM 
      }); 
     }); 

    }); 

});

Working Demo here.

Выполняя каждую команду в функции обратного вызова предыдущей команды, команда не будет работать до тех пор, пока не завершится предыдущая. «переход» происходит, когда элемент удаляется из DOM, не дожидаясь завершения SlideUp.

источник

2009-04-09 15:55:00

приятная демонстрация, пожелайте, чтобы больше людей это сделали. – redsquare

Пожелание stackoverflow обеспечило бы sandbox –

Спасибо. Я обнаружил jsbin здесь в stackoverflow и использовал его с тех пор, чтобы предоставить работоспособные демонстрации в ответах - http://jsbin.com –

$("#id").fadeIn(500, function() { 

    $("#id2").slideUp(500).delay(800).fadeOut(400); 

});

источник

2012-07-04 18:02:31 albert

Попробуйте $('.row').animate({ height: 'toggle', opacity: 'toggle' }, 'slow').slideUp();

demo Here

источник

2015-09-18 09:17:23 Nithee

ответ

Смежные вопросы