jQuery مسبقًا للي إلى UL مع الرسوم المتحركة

Question

لديّ UL وأعمل على إضافة Li جديد بشكل ديناميكي إلى أعلى UL مع بعض الرسوم المتحركة.

لدي ما يلي حتى الآن والذي يعمل بشكل جيد:

$("#container").prepend('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");

#container هو UL

المشكلة في ما سبق هي أن تخفي UL بأكمله ثم ينزلق UL بالكامل وأريد فقط LI الجديد الذي تم إعداده مسبقًا.

أفكار؟ شكرا

Answer 1

يمكنك أن تفعل ما تريد أسهل قليلاً باستخدام .prependTo() و $(html), ، مثله:

$('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>')
  .hide().prependTo('#container').slideDown("slow");

يمكنك رؤية عرض تجريبي للرمز أعلاه هنا

.prepend() يعيد العنصر الذي مسبقة ل, ، وليس العنصر أو العناصر التي تم إعدادها مسبقًا. تبديلها إلى .prependTo() يجعلها أكثر نظافة ويجب أن يكون لها التأثير الذي تريده ، حيث يمكنك متابعة التسلسل على العناصر التي تسبقها. أيضًا ، إذا كنت تستخدم نفس السلسلة عدة مرات ، فسيؤدي ذلك الآن إلى تخزين جزء المستند وجعله أسرع أيضًا :)

شيء أخير ، إذا كنت تفعل ذلك عدة مرات ، تأكد من أن المعرف على <li> فريد من نوعه ، أو أنك تقوم بإنشاء HTML غير صالح والتي سيكون لها بعض الآثار الجانبية غير المرغوب فيها.

Answer 2

http://jsfiddle.net/ecpel/13/

هذا يجب أن يساعد

باستخدام Keyframe الرسوم المتحركة

.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);   }
}

واستخدام JavaScript الأساسي

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

يمكنك تحقيق التقوى.