عرض الدعاوى على أساس الهوية في تسلسل
سؤال
أنا أعمل على خلق for-loop أن يدعو تأثير جافا سكريبت وينطبق ذلك على لي ، يفعلون ذلك في تسلسل.هذا ما لدي:
$(document).ready(function () {
for(i=1;i<=10;i++) {
$("li#"+i).show();
}
});
إلا أن هذا لا يعمل.أنا في حاجة إليها لتطبيق تأثير لى#1 ثم لى#2, لى#3...وهلم جرا.
ما أحاول القيام به هو على غرار ما تويتر لا عند النقر فوق "المزيد" زر في أسفل الصفحة فقط بدلا من القفز أريد أن سهولة إلى أسفل.
تحرير: لا أستطيع مجرد التفاف الدعاوى في شعبة وأنا ذاهب إلى أن إضافة الدعاوى إلى العنصر UL.
ومع ذلك ، إذا كان هناك طريقة لتحريك UL كما تغير حجم سأكون كل شيء من أجل ذلك.
المحلول
$(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 على موقع الويب الخاص بك هو مجموعة من الدعاوى
نصائح أخرى
إذا كنت يريد كل واحد أن يظهر في نفس المعدل ، ولكن مع تأخير طفيف بين كل, قد تحتاج إلى استخدام 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.
هذا ينبغي أن نفعل ذلك ، إذا كان لديك قائمة مثل ذلك:
<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' إلى 'سريعة' أو الوقت.