fadeIn و Fadeout چند عنصر و اعمال انیمیشن به این عناصر بدون محسوس بودن تغییر دور در لوپ

[bftarane]

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

setInterval("repeatfunction()", 20000);
function repeatfunction() {



var toggleWidth1 = $("#picOne").width() == 70 ? "10px" : "70px";
var toggleWidth2 = $("#picTwo").width() == 70 ? "10px" : "70px";
var toggleWidth3 = $("#picThree").width() == 70 ? "10px" : "70px";
var toggleWidth4 = $("#picFour").width() == 70 ? "10px" : "70px";
var toggleWidth5 = $("#picFive").width() == 70 ? "10px" : "70px";
var toggleWidth6 = $("#picSix").width() == 70 ? "10px" : "70px";
var toggleWidth7 = $("#picSeven").width() == 70 ? "10px" : "70px";
var toggleWidth8 = $("#picEight").width() == 70 ? "10px" : "70px";

$('#picOne').fadeIn().animate({ width: toggleWidth1 },1000).delay(11000).fadeOut();
$('#picFive').delay(12000).fadeIn().animate({ width: toggleWidth5 },1000);
$('#picTwo').delay(5000).fadeIn().animate({ width: toggleWidth2 },1000).delay(7000).fadeOut();
$('#picSix').delay(14000).fadeIn().animate({ width: toggleWidth6 },1000);
$('#picThree').delay(7000).fadeIn().animate({ width: toggleWidth3 },1000).delay(7000).fadeOut();
$('#picSeven').delay(16000).fadeIn().animate({ width: toggleWidth7 },1000);
$('#picFour').delay(9000).fadeIn().animate({ width: toggleWidth4 },1000).delay(7000).fadeOut();
$('#picEight').delay(18000).fadeIn().animate({ width: toggleWidth8 },1000);

}
که مشکلی که داشت این بود که بعد از اینکه دور اول تموم شد به طور آنی همه دیوها ناپدید می شدن و بعد دوباره دور دوم شروع میشد که این باعث ایجاد یه پرش میشد
برای رفع این دو معضل کدهای زیر رو اضافه کردم

مشکل دیگه این بود که من عرض ابتدایی دیو رو 10 گرفته بودم بعد در animate اون رو به 70 افزایش می دادم که یه انیمیشن بزرگ شدن عکس انجام بشه که در دور اول مشکلی نبود ولی در بعضی از دورها به جای اینکه از 10 به 70 افزایش پیدا کنه عرض از 70 به 10 کاهش پیدا می کرد و باعث می شد دیوها گاهی اوقات کوچک بشن و گاهی اوقات بزرگ که من این رو نمی خواستم.
برای رفع این دو معضل کدهای زیر رو اضافه کردم

$('#pics img').css({ 'width': '10px' });
$('#picFive').hide(1000);
$('#picSix').hide(1000);
$('#picSeven').hide(1000);
$('#picEight').hide(1000);


$('#picOne').hide();
$('#picTwo').hide();
$('#picThree').hide();
$('#picFour').hide();
ولی الآنم خوشم نمی یاد از این راه حلی که انجام دادم یعنی دوست دارم در لوپ انیمیشنها تکرار بشن بدون اینکه محسوس باشه کی داره دور لوپ عوش می شه یعنی می خوام این کدهایی که در بالا اضافه کردم نباشن (اگه اجازه بدین دور اول تموم بشه تقریباً 18 ثانیه طول میکشه منظورم رو متوجه می شید، دور اول که تموم شد یه چند تا عکس کوچیک می شن و fadeOut میشن و من از این حالت خوشم نمی یاد) ولی مشکل هم رفع بشه.

ممنوم می شم راهنمایی کنید.
در لینک زیر یه نمونه آماده کردم می تونید ببینید
http://jsfiddle.net/5zf3C/3/
اینم یه عکس برای اینکه بهتر منظورم رو متوجه بشید
112508
اون قسمتهایی که دورش رو قرمز کشیدم می خوام نباشن ولی پرش ناگهانی به دور دوم لوپ هم وجود نداشته باشه.
ممنون

[jalil_gh]

تو خط ۱۵ شما اول عکس رو fadeIn می‌کنید(اینجا طول عکس برابر با ۱۰ هست). بعدش با انیمیشن طول اون رو به ۷۰ می‌رسونید. بعد ۱۱ ثانیه صبر می‌کنید و بعد اونو fadeOut می‌کنید. چیزی که (به نظر من) شما فراموش کردید اینه که در این مرحله طول تصویر ۷۰ شده و بار دوم که setInterval تابع رو اجرا می‌کنه طول تصویر هفتاد هست و نتیجه toggleWidth1 برابر با ۱۰ خواهد بود. برای همینه که تصویر از بزرگ به کوچک تغییر می‌کنه.
شما می‌تونید بعد از اتمام fadeOut دوباره طول تصویر رو برابر با ۱۰ قرار بدید.
$('#picOne').fadeIn().animate({ width: toggleWidth1 },1000).delay(11000).fadeOut(function(){
$(this).css('width', 10);
});

ویرایش:
بقیه موارد رو هم می‌تونید خودتون بررسی کنید.