jQuery باستخدام إلحاق مع الآثار

Question

كيف يمكنني استخدام .append() مع آثار مثل show('slow')

وجود آثار على append لا يبدو أن يعمل على الإطلاق، ويعطي نفس النتيجة طبيعية show(). وبعد لا انتقالات، لا الرسوم المتحركة.

كيف يمكنني إلحاق بحف واحد إلى آخر، ولديك slideDown أو show('slow') تأثير على ذلك؟

Answer 1

عدم وجود آثار على إلحاقا لن يعمل لأن المحتوى يتم تحديث عرض المستعرض بمجرد إلحاق Div. لذلك، للجمع بين إجابات Mark B و Steerpike:

نمط DIV أنت إلحاق بمخفية قبل إلحاق ذلك بالفعل. يمكنك القيام بذلك مع البرنامج النصي المضمن أو الخارجي، أو مجرد إنشاء 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');

Answer 2

الجوهر هو هذا:

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

Answer 3

طريقة أخرى عند العمل مع البيانات الواردة (مثل من مكالمة AJAX):

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

Answer 4

شيء مثل:

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

يجب القيام به؟

تحرير: عذرا، خطأ في الرمز وأخذ اقتراح مات على متن الطائرة أيضا.

Answer 5

عند إلحاق الدف، إخفائه و اظهره مع الحجة "slow".

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

Answer 6

قم بتعيين DIV الملحق ليكون مخفيا في البداية من خلال CSS visibility:hidden.

Answer 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>";


}

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

Answer 9

من الممكن إظهار السلس إذا كنت تستخدم الرسوم المتحركة. في النمط فقط أضف "الرسوم المتحركة: إظهار 1S" والظهور بأكمله مظهر في إطارات مفاتيح.

Answer 10

في حالتي:

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

يمكنك ضبط CSS الخاص بك مع الرؤية: مخفي -> الرؤية: مرئي وضبط التحولات وغيرها الانتقال: الرؤية 1.0s؛