jQuery bằng cách sử dụng thêm với các hiệu ứng

Question

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

hiệu ứng Có trên append dường như không làm việc ở tất cả, và nó cung cấp cho các kết quả tương tự như bình thường show(). Không chuyển tiếp, không có hoạt ảnh.

Làm cách nào để nối một div này với div khác và có hiệu ứng slideDown hoặc show('slow') trên đó?

Answer 1

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

Kiểu div bạn đang thêm vào bị ẩn trước khi bạn thực sự thêm nó. Bạn có thể làm điều đó với inline hoặc kịch bản CSS 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ể tác động dây chuyền đến append của bạn (demo):

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

Hoặc (demo):

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

Answer 2

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

Answer 3

Cái gì như:

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

nên làm điều đó?

Chỉnh sửa: xin lỗi, sai mã và đề xuất của Matt trên diễn đàn.

Answer 4

Bản chất là thế này:

1. Bạn đang gọi điện thoại 'append' trên mẹ
2. nhưng bạn muốn gọi 'show' trên con mới

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

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

hay:

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

Answer 5

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

Answer 6

Tôi đang cần một loại tương tự của giải pháp, muốn thêm dữ liệu vào một bức tường như facebook, khi đăng tải, sử dụng prepend() thêm bài viết mới nhất trên đầu, suy nghĩ có thể có ích cho những 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>"; 


} 

Answer 7

Tại sao bạn không chỉ đơn giản là che giấu, thêm, 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> 

Answer 8

Khi bạn thêm vào các div, hide nó và hiển thị nó với đối số "slow".

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

Answer 9

Có thể hiển thị trơn tru nếu bạn sử dụng Hoạt ảnh. Trong kiểu chỉ cần thêm "hoạt hình: hiển thị 1" và toàn bộ giao diện được ghi lại trong khung hình chính.

Answer 10

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 bạn với visibility: hidden -> visibility: nhìn thấy và điều chỉnh các hiệu ứng chuyển tiếp vv chuyển: tầm nhìn 1.0s;