jQuery efektleri ile ekleme kullanarak

.append()Gibi efektlerle nasıl kullanabilirimshow('slow')

Etkileri olması appendhiç işe yaramıyor ve normal ile aynı sonucu veriyor show(). Geçiş yok, animasyon yok.

Nasıl başka bir div eklemek ve bir olabilir slideDownveya show('slow')üzerinde etkisi?

Bölme eklenir eklenmez, tarayıcının görüntülediği içerik güncellendiğinden, ekleme üzerinde efektler çalışmayacaktır. Mark B ve Steerpike'ın cevaplarını birleştirmek için:

Gerçekte eklemeden önce, eklediğiniz div öğesini gizli olarak biçimlendirin. Satır içi veya harici CSS komut dosyasıyla yapabilir veya yalnızca div'ı

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

Ardından , ekinize ( demo ) etkileri zincirleyebilirsiniz :

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

Veya ( demo ):

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

Özü şudur:

1. Ebeveyne 'ekle' diyorsunuz
2. ama yeni çocuğa 'show' demek istersin

Bu benim için çalışıyor:

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

veya:

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

Gelen verilerle çalışırken (ajax çağrısında olduğu gibi) başka bir yol:

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

Gibi bir şey:

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

yapmalı?

Düzenleme: üzgünüm, kodda hata ve Matt de gemide öneri aldı.

Div'e eklediğinizde, gizleyin ve argümanla gösterin"slow" .

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

Eklenen div'i başlangıçta css ile gizlenecek şekilde ayarlayın visibility:hidden.

Benzer bir çözüme ihtiyacım vardı, facebook gibi bir duvara veri eklemek istedim, yayınlandığında, prepend()en son gönderiyi eklemek için kullanın , diğerleri için yararlı olabilir düşündüm.

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

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

ajax.php içindeki kod

if (isset($_POST))
{

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


}

Neden böyle saklamıyorsun, eklemiyorsun, sonra göstermiyorsun:

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

Animasyon kullanıyorsanız pürüzsüz göstermek mümkündür. Stil olarak sadece "animasyon: show 1s" ekleyin ve tüm görünüm anahtar karelerde tanımlayın.

Benim durumumda:

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

css'inizi görünürlükle ayarlayabilirsiniz: gizli -> görünürlük: görünür ve geçişleri ayarlayın vb geçiş: görünürlük 1.0s;