jQuery sử dụng chắp thêm hiệu ứng

Làm thế nào tôi có thể sử dụng .append()với các hiệu ứng nhưshow('slow')

Có tác dụng đối với appenddường như không hoạt động, và nó cho kết quả tương tự như bình thường show(). Không chuyển tiếp, không hình ảnh động.

Làm thế nào tôi có thể gắn một div khác, và có một slideDownhoặc show('slow')ảnh hưởng đến nó?

Có hiệu ứng trên append sẽ không hoạt động vì nội dung trình duyệt hiển thị được cập nhật ngay sau khi div được nối. Vì vậy, để kết hợp câu trả lời của Mark B và Steerpike:

Phong cách div bạn đang nối như ẩn trước khi bạn thực sự nối nó. Bạn có thể làm điều đó với tập lệnh CSS nội tuyến hoặc bên ngoài hoặc chỉ cần tạo div như

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

Sau đó, bạn có thể xâu chuỗi các hiệu ứng để nối thêm ( bản demo ):

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

Hoặc ( bản demo ):

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

Bản chất là đây:

1. Bạn đang gọi 'phụ lục' vào phụ huynh
2. nhưng bạn muốn gọi 'chương trình' cho đứa trẻ mới

Điều này làm việc cho tôi:

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

hoặc là:

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

Một cách khác khi làm việc với dữ liệu đến (như từ cuộc gọi ajax):

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

Cái gì đó như:

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

Hãy làm nó?

Chỉnh sửa: xin lỗi, nhầm mã và đưa đề xuất của Matt lên máy bay.

Khi bạn nối vào div, ẩn nó và hiển thị nó với đối số "slow".

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

Đặt div được nối thêm để được ẩn ban đầu thông qua css visibility:hidden.

Tôi đang cần một loại giải pháp tương tự, muốn thêm dữ liệu trên tường như facebook, khi được đăng, sử dụng prepend()để thêm bài đăng mới nhất lên đầu, nghĩ rằng có thể hữu ích cho người khác ..

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

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

mã trong ajax.php là

if (isset($_POST))
{

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


}

Tại sao bạn không đơn giản ẩn, nối, sau đó hiển thị, như thế này:

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

Có thể hiển thị mượt mà nếu bạn sử dụng Animation. Trong phong cách, chỉ cần thêm "hình động: hiển thị 1s" và toàn bộ diện mạo xuất hiện trong khung hình chính.

Trong trường hợp của tôi:

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

bạn có thể điều chỉnh css của mình với khả năng hiển thị: ẩn -> khả năng hiển thị: hiển thị và điều chỉnh các hiệu ứng chuyển tiếp, v.v.: tầm nhìn 1.0s;