Sử dụng jquery, làm cách nào để tạo hiệu ứng thêm một mục danh sách mới vào danh sách?

Question

Tôi có một hàm javascript đơn giản cho phép tôi thêm một mục vào danh sách. Lưu ý rằng tôi sử dụng JQuery ...

function prependListItem(listName, listItemHTML) 
{ 
    //Shift down list items... 
    $("#" + listName + " li:first").slideDown("slow"); 

    //Add new item to list... 
    $(listItemHTML).prependTo("#" + listName)  
} 

Các 'listname' chỉ đơn giản là một <ul> với một số <li> 's.

Tác phẩm đang chờ xử lý tốt, nhưng tôi không thể có hiệu ứng slideDown hoạt động. Tôi muốn các mục danh sách trượt xuống và mục mới sẽ xuất hiện ở trên cùng. Bất kỳ ý tưởng làm thế nào để thực hiện điều này? Tôi vẫn còn mới để JQuery ...

Answer 1

Nếu bạn muốn nó được thêm vào và trượt xuống cùng một lúc làm việc này:

function prependListItem(listName, listItemHTML){ 
    $(listItemHTML).hide().prependTo('#' + listName).slideDown('slow'); 
} 

Để thực sự làm chính xác những gì bạn mô tả (trượt xuống, sau đó fade in), bạn sẽ cần một cái gì đó như thế này:

function prependListItem(listName, listItemHTML){ 
    $(listItemHTML) 
     .hide() 
     .css('opacity',0.0) 
     .prependTo('#' + listName) 
     .slideDown('slow') 
     .animate({opacity: 1.0}) 
} 

Answer 2

Hãy thử:

$("<li>new item</li>").hide().prependTo("#" + listName).slideDown("slow"); 

Nói cách khác:

• Tạo mục danh sách mới;
• Ẩn nội dung đó (để không hiển thị khi được thêm vào danh sách);
• Thêm nó vào đầu danh sách; sau đó
• Trượt xuống. Các mục khác sẽ trượt xuống.

Answer 3

http://jsfiddle.net/eCpEL/13/

này sẽ giúp

Sử dụng keyframe animation

.comefromtop { 
    animation: comefromtop 0.5s; 
} 
.pushdown { 
    animation: pushdown 0.5s; 
} 

@-webkit-keyframes comefromtop { 
    0% { opacity:0; -webkit-transform: translateY(-100%); } 
    100% { opacity:1; -webkit-transform: translateY(0px); } 
} 

@-webkit-keyframes pushdown { 
    0% { /*opacity:0;*/ -webkit-transform: translateY(-10%); } 
    100% { /*opacity:1;*/ -webkit-transform: translateY(0); } 
} 

Và sử dụng một javascript cơ bản

function add() { 
    var val = $('#input').val(); 
    var item = $('<li></li>').addClass('comefromtop').attr('id',val).text(val);   $('#Trees').prepend(item).addClass('pushdown'); 
    setTimeout(function() { 
     $('#Trees').removeClass('pushdown'); 
    }, 600); 
} 
$('.add').click(add); 
$('#input').on('keypress',function (e) { 
    if (e.keyCode === 13) { 
     add(); 
    } 
}); 

Bạn có thể đạt được sự tin kính