سلام.

کد کاملتون رو داخل فایل زیپ پیوست کنید.

سلام مجدد

فایل zip رو فرستادم

درود

به دلیل مشکل تایمر و ست شدن سلکتورهاست. باید باهاش بازی کنید تا زمان مناسب رو پیدا کنید.

دقت کنید که کدتون مشکل خاصی جز مورد بالا نداره اما برای بهینه‌تر شدن و درست عمل کردن، بنده علاوه بر اصلاح کد به صورت زیر، ظاهرشدن رو هم از تایمر بیرون کشیدم:

  jQuery('#slider ul li:nth-child(n+2)').animate({opacity:0},1000,function(){
    jQuery('#slider ul li:last-child').prependTo('#slider ul');
})
jQuery('#slider ul li').css({opacity:1});
})

سلام

مشکل بنده ربطی به تایمر و ست شدنشون نداره برای اینکه حتی اگه duration متد animate رو هم صفر کنیم باز هم appendTo اتفاق نمیوفته!!!

تغییری که شما دادی بیشتر کنجکاوم کرد که چه اتفاقی افتاد

الگوریتم کدی که من نوشتم : تمام li‌ها به جز اولی opacity شون بعد از 1 ثانیه، 0 بشه و بعد از صفر شدن، اولین li به انتها بره. یعنی به ترتیب تصویر 4 و 3 و 2 همزمان transparent بشن و اینطوری تصویر 1 مشخص میشه و بعد همین تصویر 1 باید به انتها بره که خب نمیره و میره توی جایگاه دوم!!!

الگوریتمی کدی که شما نوشتی: تمام li‌ها به جز اولی opacity شون بعد از 1 ثانیه، 0 بشه و بعد از صفر شدن، آخرین li به اول بیاد. یعنی به ترتیب تصویر 4 و 3 و 2 همزمان transparent بشن و اینطوری تصویر 1 مشخص میشه و بعد آخرین تصویر که شماره 4 باشه باید به ابتدا بره و باز هم کارش رو انجام نمیده و نمیره ولی در عوض تصویر 1، append میشه و به انتها میره !!!!!!! :)

مطمئنا چیزی رو درست متوجه نشدم.

میشه توضیح بدید دقیقا چه اتفاقی افتاد؟ چرا دستور append توی کدی که نوشتم کار نمیکنه و کد prepend توی کد شما کار append رو میکنه :) این اتفاق، اگه duration انیمیت رو هم 0 کنیم میوفته!

(اون متد css هم کاری باهاش ندارم چون عملا تاثیری توی جا به جایی عناصر نداره)

سلام مجدد

برای درک بهتر از مشکل کافیه که توی کد قبلی تون، خط اول رو به صورت کامل کامنت کنید. وقتی کامنت کردید میبینید که باقی کدتون به درستی کار میکنه و تنها مشکلی که داره اینه که fade نمیشه که کاملا طبیعیه چون همون خطی هست که کامنت شده. پس مشکل از append نیست و این عمل به درستی داره انجام میشه. اما چه اتفاقی میفته که وقتی اون خط رو از کامنت درمیارید درست اجرا نمیشه؟

جواب: به دلیل سلکتور n+2 خطوطی که داخل تابع تایمر دارتون هستند به ازای هر المان از لیست (به جز اولی) یکبار اجرا میشوند. (یعنی در مجموع سه بار)

فرض کنید در ابتدا لیست شما به ترتیب از چپ به راست چنین ترتیبی داره:

1-2-3-4

در کد شما اول 1 میره ته:

2-3-4-1

، بعد 2 میره ته:

3-4-1-2

بعد 3 میره ته:

4-1-2-3

در کد منم به این صورت میشه:

4-1-2-3

3-4-1-2

2-3-4-1

باز برای درک سریعترمیتونید قبل و بعد از عملیات append یا prepend لیست رو در کنسول چاپ کنید تا بهتر ترتیب رو متوجه بشید:

console.log(jQuery('#slider ul li'))

و نکته بعدی اینکه کدتون حداقل روی سیستم من وسط fade شدن هنگ میکرد و درست append نمیشد که گویا شما چنین باگی ندارید (البته من یکم تند کلیدها رو میزدم) این مشکل از اجرای حلقه همراه با تایمر هست و با تنظیم تایمر و یا تغییر سلکتور حل میشه. همچنین همین بخش ظاهرشدن رو به منظور بهینگی از درون تایمر بیرون کشیدم.

اگر مشکلتون رفع شد حتما تاپیک رو به نکته آموزشی تغییر بدید تا برای سایر دوستان مفید باشه. اگر نه که حتما بپرسید تا مبحث به خوبی براتون روشن بشه.

سلام

ممنون از راهنمایی تون

پس به عبارتی در کدی که شما نوشتید. متد prepend عمل append رو انجام نمیده، بلکه به خاطر اینکه سلکتور ما یعنی

('#slider ul li:nth-child(n+2)') شامل 3 عنصر شده، عمل prepend رو 3 بار تکرار کرده و اینطور به نظر میاد که عمل append انجام شده.

جالب اینه که یادمه بعد از دیدن callback function توی دوره، یکی دو تا منبع رو چک کردم ببینم نکته ای داره یا نه و هر دو نوشته بودن فقط برای اجرای یه تابع بعد از اتمام تابع والد استفاده میشه!

بعد ازاینکه شما به نکته ش اشاره کردید، بیشتر سرچ کردم و دیدم فقط 2 منبع بهش اشاره کردند که callback function‌ها به ازای هر عناصر انتخاب شده در سلکتورها 1 بار اجرا میشوند. مثلا اگر 10 عنصر انتخاب شده بود 10 بار تکرار میشوند

بعذ از این نکته چنند تا سوال برا پیش اومده

1) دلیل این تکرار دستورات به ازای تعداد عناصر چیه؟

2) این تکرار‌ها باعث کندی در پردازش نمیشه؟ (به خصوص اگه کد بزرگ و پیچیده‌تر باشه)

3) با اینکه متوجه این نکته شدم ولی هنوز نمیدونم چرا بعضی از کد‌ها درست کار نمکینه

مثلا این کد ها

jQuery(document).ready(function () {
 
jQuery('body').click(function(){
  jQuery('p:nth-child(n+5)').animate({'opacity':0.5},2000,function(){
    jQuery('p:first-child').remove();
    // jQuery('p:last-child').remove();
    // jQuery('p:nth-child(n+5)').remove();
    // jQuery('p:nth-last-child(n+5)').remove();
    // jQuery('p:first-child').fadeOut(2000);
    // jQuery('p:last-child').fadeOut(2000);
    // jQuery('p:nth-child(n+10)').fadeOut(2000);
    // jQuery('p:nth-last-child(n+10)').fadeOut(2000);
    // jQuery('p:first-child').css({'color':'red'});
    // jQuery('p:last-child').css({'color':'red'});
    // jQuery('p:nth-child(n+10)').css({'color':'red'});
    // jQuery('p:nth-last-child(n+10)').css({'color':'red'});
    
    // jQuery('p:first-child').appendTo('body');
    // jQuery('p:last-child').prependTo('body');
    // jQuery('p:nth-child(n+10)').prependTo('body');
    // jQuery('p:nth-last-child(n+10)').appendTo('body'); 
     console.log(jQuery('p'))
  });
  });

در کد‌های بالا برای متد‌های remove - fadeout - css و append , prepend سلکتور‌های مشابهی رو گذاشتم

تمام سلکتور‌های ('p:first-child') برای تمام متد‌ها به درستی کار میکنه ولی ('p:last-child') برای هیچکدام از متد‌ها کار نمیکنه

همینطور سلکتورهای ('p:nth-child(n)') برای همه متد‌ها درست کار میکنه ولی ('p:nth-last-child(n)') به درستی کار نمیکنه

(جالب اینجاست که مثلا در متد css سلکتور ('p:nth-child(n+10)') و ('p:last-child') آخرین تگ p رو انتخاب میکنن. که nth به درستی کار میکنه ولی last-child کار نمیکنه.)

اگه میشه هر کدوم رو به تفکیک راهنمایی کنید ایراد کجاست...

4) گفتید که : "اگر مشکلتون حل شد حتما تاپیک رو به نکته آموزشی تغییر بدید تا برای سایر دوستان مفید باشه"

میخواستم بدونم چطور میشه اینکار کرد؟

ممنون

سلام

ببخشید یادم رفت کد‌ها رو بفرستم

تشکر فراوان

مشکل حل شد :)