jQuery, використовуючи додавання з ефектами

Як я можу використовувати .append()такі ефекти, якshow('slow')

Вплив на вплив append, схоже, не працює, і це дає такий же результат, як і звичайний show(). Ні переходів, ні анімації.

Як я можу додати один div до іншого і мати на нього вплив slideDownчи show('slow')ефект?

Вплив на додавання не працюватиме, оскільки вміст, який відображається у веб-переглядачі, оновлюється, як тільки додається 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');

Суть така:

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');

Інший спосіб роботи з вхідними даними (наприклад, з виклику Ajax):

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

Щось на зразок:

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

повинен це робити?

Редагувати: вибачте, помилка в коді та прийняла пропозицію Метта також на борту.

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

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

Встановіть додається DIV бути приховані спочатку через CSS visibility:hidden.

Я потребував подібного рішення, хотів додати дані на стіні, як у 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>";


}

Чому ви просто не заховаєте, додаєте та не показуєте, як це:

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

Можна використовувати плавне зображення, якщо ви використовуєте Анімація. У стилі просто додайте "анімацію: покажіть 1s" і весь зовнішній вигляд описуйте в ключових кадрах.

У моєму випадку:

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

ви можете налаштувати свій css з видимістю: приховано -> видимість: видимий та коригування переходів тощо перехід: видимість 1.0s;