jQuery using append with effects

问题

How can I use .append() with effects like show('slow')

Having effects on append doesn't seem to work at all, and it give the same result as normal show(). No transitions, no animations.

How can I append one div to another, and have a slideDown or show('slow') effect on it?

回答1:

Having effects on append won't work because the content the browser displays is updated as soon as the div is appended. So, to combine Mark B's and Steerpike's answers:

Style the div you're appending as hidden before you actually append it. You can do it with inline or external CSS script, or just create the div as

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

Then you can chain effects to your append (demo):

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

Or (demo):

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

回答2:

The essence is this:

You're calling 'append' on the parent
but you want to call 'show' on the new child

This works for me:

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

or:

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

回答3:

Another way when working with incoming data (like from an ajax call):

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

回答4:

Something like:

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

should do it?

Edit: sorry, mistake in code and took Matt's suggestion on board too.

回答5:

When you append to the div, hide it and show it with the argument "slow".

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

回答6:

Set the appended div to be hidden initially through css visibility:hidden.

回答7:

I was in need of a similar kind of solution, wanted to add data on a wall like facebook, when posted,use prepend() to add the latest post on top, thought might be useful for others..

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

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

the code in ajax.php is

if (isset($_POST))
{

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


}

回答8:

Why don't you simply hide, append, then show, like this:

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

It is possible to show smooth if you use Animation. In style just add "animation: show 1s" and the whole appearance discribe in keyframes.

回答10:

In my case:

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

you can adjust your css with visibility:hidden -> visibility:visible and adjust the transitions etc transition: visibility 1.0s;

来源：https://stackoverflow.com/questions/1520178/jquery-using-append-with-effects

标签

jquery

animation

append

effects

show