Элегантный способ свернуть пустой div с помощью jQuery? - PullRequest
Новая
       11

Элегантный способ свернуть пустой div с помощью jQuery?

4 голосов
/ 15 сентября 2011

Предположим, у меня есть страница со следующим содержанием: 

<div><p>Some content</p></div>
<div id="container"><p class="destroy">Some content that will go away.</p></div>
<div if="footer"><p>Some footer content.</p></div>

И немного jQuery: 

jQuery(".destroy").click(function(){
    jQuery(this).fadeOut('slow');
})

Как избежать «скачка» нижнего колонтитула, когда содержимое исчезнет? Я бы хотел, чтобы он плавно встал на место.

Вот проблема . Вот , как я бы хотел, чтобы он работал (но без указания высоты).

Предостережения:

  1. Контейнер # будет различаться по ширине и высоте, поскольку его содержимое будет динамическим.
  2. Решение должно быть минимальным, но читабельным.
  3. jQuery и пользовательский интерфейс jQuery включены.
  4. Бонусные баллы за элегантное универсальное решение (обнаруживает все пустые элементы div и плавно сворачивает их).

Ответы [ 4 ]

9 голосов
/ 15 сентября 2011

Вы получаете «прыжок», потому что .fadeOut() устанавливает display:none, когда анимация завершена.

Используйте .fadeTo() вместо этого и уменьшите непрозрачность до 0. Затем вы можете связать это с slideUp(), чтобы получить точное поведение, которое вы указали как «как бы я хотел, чтобы оно работало» 

jQuery('.destroy').click(function(){
    jQuery(this).fadeTo('slow', 0).slideUp();
})

Доказательство пудинга: http://jsfiddle.net/qJFnc/4/

Если в #container больше ничего нет, вы можете вместо этого позвонить slideUp(): 

jQuery('.destroy').click(function(){
    jQuery(this).fadeTo('slow', 0, function() {
        jQuery('#container').slideUp();
    });
})

Больше пудинга: http://jsfiddle.net/qJFnc/5/

1 голос
/ 15 сентября 2011

Анимировать его до нуля, а затем удалить при обратном вызове

демо: http://jsfiddle.net/qJFnc/2/

jQuery('.destroy').click(function(){
    jQuery(this).animate({height : 0}, function() {
        $(this).remove();
    })
})

------------------Edit:

Чтобы использовать эффект затухания без высоты CSS, вам нужно использовать fadeTo (), так как он не удаляет элемент, как это делает fadeOut.Затем при обратном вызове этого элемента сдвиньте элемент вверх.

Демо: http://jsfiddle.net/qJFnc/10/

Обновленный источник: 

jQuery('.destroy').click(function(){
    jQuery(this).fadeTo(500,0, function() {
        $(this).slideUp();
    })
})
0 голосов
/ 15 сентября 2011

как насчет этого? 

$(".destroy").click(function(){
    $("#container").animate({opacity : 0},400,function(){
        $(this).slideUp(100);
    });
})

http://jsfiddle.net/R779K/

Функция animate имеет обратный вызов, который запускается ПОСЛЕ завершения основной анимации. Вы можете иметь там все, что хотите.

Opacity устанавливает только свойство opacity, оставляя блок display нетронутым для div, поэтому при исчезновении он выглядит так, как будто #content исчез, а нижний колонтитул медленно занимает пустое пространство.

0 голосов
/ 15 сентября 2011

Попробуй это. Это получит динамическую высоту и установит ее в css.

http://jsfiddle.net/kQugU/2/

jQuery('.destroy').click(function(){
    jQuery('#container').css("height", jQuery('#container').height());
    jQuery(this).fadeOut('slow',function(){
        jQuery('#container').slideUp();
    })
})
...