jQuery ใช้การต่อท้ายพร้อมเอฟเฟกต์

ฉันจะใช้.append()กับเอฟเฟกต์เช่นได้อย่างไรshow('slow')

มีผลกระทบต่อดูเหมือนจะไม่ทำงานเลยและมันก็ให้ผลเช่นเดียวกับปกติappend show()ไม่มีการเปลี่ยนไม่มีภาพเคลื่อนไหว

ฉันจะผนวกส่วนหนึ่งไปอีกอันหนึ่งได้อย่างไรและมีslideDownหรือshow('slow')มีผลกระทบกับมัน?

การมีผลต่อการต่อท้ายจะไม่ทำงานเนื่องจากเนื้อหาที่เบราว์เซอร์แสดงถูกอัปเดตทันทีที่ div ถูกต่อท้าย ดังนั้นเพื่อรวมคำตอบของ Mark B และ Steerpike:

จัดลักษณะ div ที่คุณแนบท้ายว่าซ่อนอยู่ก่อนที่จะผนวกท้าย คุณสามารถทำได้ด้วย inline หรือสคริปต์ 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');

ควรทำอย่างไร

แก้ไข: ขออภัยมีข้อผิดพลาดในรหัสและนำข้อเสนอแนะของ Matt เข้ามาด้วย

เมื่อคุณผนวกกับ div ที่ซ่อนและแสดงมัน"slow"มีการโต้แย้ง

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

ตั้ง div ท้ายถูกซ่อนไว้ในตอนแรกผ่าน visibility:hiddenCSS

ฉันต้องการโซลูชันที่คล้ายกันต้องการเพิ่มข้อมูลบนผนังเช่น 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>

เป็นไปได้ที่จะแสดงให้ราบรื่นหากคุณใช้ Animation อย่างมีสไตล์แค่เพิ่ม "แอนิเมชัน: โชว์ 1s" และแสดงลักษณะทั้งหมดในคีย์เฟรม

ในกรณีของฉัน:

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

คุณสามารถปรับ CSS ของคุณด้วยการมองเห็น: hidden -> การมองเห็น: มองเห็นได้และปรับการเปลี่ยน ฯลฯ การเปลี่ยน: ทัศนวิสัย 1.0s;