عرض الدعاوى على أساس الهوية في تسلسل

Question

أنا أعمل على خلق for-loop أن يدعو تأثير جافا سكريبت وينطبق ذلك على لي ، يفعلون ذلك في تسلسل.هذا ما لدي:

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show();
    }
});

إلا أن هذا لا يعمل.أنا في حاجة إليها لتطبيق تأثير لى#1 ثم لى#2, لى#3...وهلم جرا.

ما أحاول القيام به هو على غرار ما تويتر لا عند النقر فوق "المزيد" زر في أسفل الصفحة فقط بدلا من القفز أريد أن سهولة إلى أسفل.

تحرير: لا أستطيع مجرد التفاف الدعاوى في شعبة وأنا ذاهب إلى أن إضافة الدعاوى إلى العنصر UL.

ومع ذلك ، إذا كان هناك طريقة لتحريك UL كما تغير حجم سأكون كل شيء من أجل ذلك.

Answer 1

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show("slow");
    }
});

إلقاء نظرة على عرض( السرعة [رد] ).من الطبيب:

عرض جميع المتطابقة العناصر باستخدام رشيقة الحركة و طرد اختياري رد بعد الانتهاء.

الطول والعرض ، والتعتيم من كل من مطابقة العناصر تغيرت حيوي وفقا المحدد السرعة.

أيضا هناك طرق أخرى لإخفاء أو تكشف عن العناصر ، مثل fadeIn و fadeOut.إلقاء نظرة على http://docs.jquery.com/Effects .

لم سريع نموذج من هذا النوع من الشيء الذي يتم بعد مع البيانات الثابتة:

var $lis = $('<li>blha blhahah lajlkdj</li><li>blha blhahah lsdfsajlkdj</li>').hide();
$('ul').append($lis);
$lis.show("slow");

ويعمل ، لذا فمن المحتمل أنك يمكن أن تفعل شيئا مثل التالية ، وليس لديك لعناء مع صداع بالتكرار على عنصر معرفات:

$.load('/items/?p=2',function(data) {
    var $lis = $(data).hide();
    $('ul').append($lis);
    $lis.show("slow");
});

لمجرد أن يكون واضحا أعلاه الدعوة إلى $.تحميل يفترض أن إخراج /البنود/?p=2 على موقع الويب الخاص بك هو مجموعة من الدعاوى

Answer 2

إذا كنت يريد كل واحد أن يظهر في نفس المعدل ، ولكن مع تأخير طفيف بين كل, قد تحتاج إلى استخدام setTimeout...على سبيل المثال...

$(document).ready(function () {        
    var showListItem = function(index) {
        $("li#"+index).show("slow")
    };
    for(i=1;i<=10;i++) {
        setTimeout(function() { showListItem(i); }, (i * 100))
    }
});

التي قد تبدو سخيفة قليلا, ولكن إذا كنت أتذكر بشكل صحيح إلا إذا كنت التفاف السبابة (i) في العلبة من نوع ما ثم الطريقة التي ينفذ دائما نرى قيمة ط 10.

Answer 3

أيضا, تأكد من أن إذا كنت اثار هذا عند حدث آخر أن الكثير من بنود جديدة عبر Ajax (مثل بعد النقر على زر "المزيد") ، ثم تحتاج إلى التفاف المنطق الخاص في .يعيش() التي تتوفر في مسج 1.3.

إذا كنت تستخدم مسج 1.2 يمكنك استخدام livequery بدلا من ذلك.

Answer 4

هذا ينبغي أن نفعل ذلك ، إذا كان لديك قائمة مثل ذلك:

<ul id='menu' style='display: none;'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>

ثم هل يمكن كتابة التعليمات البرمجية لعرض عناصر القائمة بالتتابع مثل هذا:

$('#menu').show().find('li').hide().bind('show', function() {
  $(this).show('slow', function() {
    $(this).next('li').trigger('show');
  });
}).filter(':first').trigger('show');

رمز هو القيام بما يلي:العثور على القائمة <ul>, تبين أن إيجاد جميع <li> وإخفائها ، ملزمة حدث مخصص يسمى show والتي ببطء يظهر العنصر ، و بمجرد أن يكتمل أظهرت يبدو لمعرفة ما إذا كان هناك أي <li> بجانب أنه يؤدي نفس الحدث لهذا العنصر.ثم نحن مرشح من جميع <li> أول واحد فقط, و تؤدي هذه الأحداث المخصصة لذلك ، وضع أساسا من تأثير الدومينو.

هنا هو مثال على ذلك في العمل.إذا كنت تريد أسرع يمكنك تغيير 'slow' إلى 'سريعة' أو الوقت.