JQuery с помощью добавления с эффектами


144

Как я могу использовать .append()с такими эффектами, какshow('slow')

appendКажется, что воздействие на не работает вообще, и дает тот же результат, что и обычно show(). Нет переходов, нет анимации.

Как я могу добавить один DIV в другой, и иметь slideDownили show('slow')влияние на него?

Ответы:


195

Влияние на добавление не будет работать, потому что содержимое, отображаемое в браузере, обновляется сразу после добавления div. Итак, чтобы объединить ответы Марка Б и Стирпайка:

Создайте div, который вы добавляете как скрытый, прежде чем вы добавите его. Вы можете сделать это с помощью встроенного или внешнего скрипта CSS, или просто создать div как

<div id="new_div" style="display: none;"> ... </div>

Затем вы можете связать эффекты для своего приложения ( демо ):

$('#new_div').appendTo('#original_div').show('slow');

Или ( демо ):

var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');

5
Вероятно, это был встроенный стиль, добавив класс CSS, такой как «скрытый», который приравнивается к отображению: ни один не является .. «classier» (baddoom tsh);)
dmp

2
Это не сработает. Когда вы используете append, он вернет original_div, а не добавленный элемент. Итак, вы на самом деле вызываете шоу на контейнере.
Вик

1
@Vic, как это происходит .append(), даже не берет строку селектора. Идея все еще верна. Спасибо, обновлено.
Мэтт Болл

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

124

Суть такова:

  1. Вы называете «добавить» на родителя
  2. но вы хотите позвонить "показать" на нового ребенка

Это работает для меня:

var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');

или:

$('<p>hello</p>').hide().appendTo(parent).show('normal');

2
Я пробовал оба эти способа, и это не работает. На добавляемом контенте нет эффекта плавного скольжения.
Chris22

'normal'не правильная строка для скорости. оставьте это поле пустым для перехода (сразу появляется). используйте строку для 200 'fast'мс или 'slow'для 600 мс. или введите любое число, например $("element").show(747)(= 747 мс), чтобы определить собственную скорость. посмотрите документы и посмотрите анимацию / продолжительность.
Honk31

2
С эффектом слайда: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
Кевин Грабхер,

Мне нравится держать часть шаблона вне шаблона
lilalinux

23

Другой способ при работе с входящими данными (например, при вызове ajax):

var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();

15

Что-то вроде:

$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');

должен это сделать?

Изменить: извините, ошибка в коде и принял предложение Мэтта на борту тоже.


1
Не уверен , если это будет делать то , что он хочет, но если это так, то вы бы цепочку функций: $('#divid').append('#newdiv').hide().show('slow').
Мэтт Болл

Это работает; бит #newdiv неверен, и вы правы, вы можете связать их. Я отредактировал свой ответ сейчас.
Марк Белл

8

Когда вы добавляете в div, скройте его и покажите с аргументом "slow".

$("#img_container").append(first_div).hide().show('slow');

Событие скрытия и показа применяется к #img_container, а не к first_div, вы должны использовать appendTo
JesuLopez

4

Установите добавленный div, чтобы он был изначально скрыт через css visibility:hidden.


3

Мне нужно было решение подобного рода, я хотел добавить данные на стене, такие как Facebook, когда они будут опубликованы, используйте prepend()для добавления последних сообщений сверху, думал, что это может быть полезно для других ..

$("#statusupdate").submit( function () {    
          $.post(
           'ajax.php',
            $(this).serialize(),
            function(data){

                $("#box").prepend($(data).fadeIn('slow'));                  
                $("#status").val('');
            }
          );
           event.preventDefault();   
        });   

код в ajax.php

if (isset($_POST))
{

    $feed = $_POST['feed'];
    echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";


}

1

Почему бы вам просто не спрятаться, не добавить, не показать, как это:

<div id="parent1" style="  width: 300px; height: 300px; background-color: yellow;">
    <div id="child" style=" width: 100px; height: 100px; background-color: red;"></div>
</div>


<div id="parent2" style="  width: 300px; height: 300px; background-color: green;">
</div>

<input id="mybutton" type="button" value="move">

<script>
    $("#mybutton").click(function(){
        $('#child').hide(1000, function(){
            $('#parent2').append($('#child'));
            $('#child').show(1000);
        });

    });
</script>

0

Можно показать сглаживание, если вы используете анимацию. В стиле просто добавьте «animation: show 1s», и весь внешний вид описывается в ключевых кадрах.


0

В моем случае:

$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");

Вы можете настроить свой CSS с видимостью: скрытый -> видимость: видимый и настроить переходы и т. д. переход: видимость 1,0 с;

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.