JQuery с добавлением эффектов

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

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

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

Ответ 1

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

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

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

Затем вы можете связать эффекты с вашим добавлением (demo):

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

Или (демонстрация):

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

Ответ 2

Суть в том, что:

Вы вызываете 'append' в родительском
но вы хотите вызвать 'show' для нового дочернего элемента

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

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

или

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

При добавлении к div, скрыть его и показать его с аргументом "slow".

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

Ответ 6

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

Ответ 7

Мне понадобилось подобное решение, хотелось добавить данные на стене, например, в 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>";


}

Ответ 8

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

<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>

Ответ 9

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

Ответ 10

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

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

вы можете настроить свой CSS с видимостью: скрытый → видимость: видимый и настроить переход и т.д. переход: видимость 1.0s;