به هم ریختن انیمیشن ها با بیکار ماندن سایت در یک مدت زمان

[bftarane]

سلام.
من سعی کردم یه افکت با استفاده از jquery ایجاد کنم که در لینک زیر می تونید ببینید

http://jsfiddle.net/kfru6/5
منتها متوجه شدم مثلاً سایت رو که باز می کنم و یه مدت کاری باهاش ندارم دوباره میام سراغش اون زمانبندی که در نظر گرفته بودم واسه اومدن و رفتن عکس ها به هم ریخته مثلاً 2 تا عکس با هم ظاهر می شن در صورتی که اول باید یکی و بعد از یه مدت کوتاه دیگری بیاد.
این مشکل رو چطور میشه حل کرد؟
این کدهای جی کوئریش هست
$(document).ready(function () {


repeatfunction();
text();
repeatfunction2()
});
function expandpicwrapper() {


$("#picwrapper").animate({ height: 171 });
}
setInterval("repeatfunction2()", 2000);

setInterval("text()", 27000);
function text() {
$('#b').hide();
$('#o').hide();
$('#r1').hide();
$('#n').hide();
$('#a1').hide();
$('#m').hide();
$('#a2').hide();
$('#d').hide();
$('#a3').hide();
$('#r2').hide();
$('#dot').hide();
$('#i').hide();
$('#r3').hide();

$('#b').fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});

$('#o').delay(1000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#r1').delay(2000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#n').delay(3000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#a1').delay(4000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#m').delay(5000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#a2').delay(6000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#d').delay(7000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#a3').delay(8000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#r2').delay(9000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#dot').delay(10000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#i').delay(11000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});
$('#r3').delay(12000).fadeIn().animate({ top: "50" }).delay(14000).fadeOut(function () {
$(this).css('top', 0);

});

}
setInterval("repeatfunction()",17000);
function repeatfunction() {
var toggleWidth3 = $("#picThree").width() == 10 ? "400px" : "10px";
var toggleHeight3 = $("#picThree").height() == 10 ? "200px" : "10px";
var toggleWidth1 = $("#picOne").width() == 10 ? "309px" : "10px";
var toggleWidth2 = $("#picTwo").width() == 10 ? "309px" : "10px";
var toggleHeight1 = $("#picOne").height() == 10 ? "190px" : "10px";
var toggleHeight2 = $("#picTwo").height() == 10 ? "261px" : "10px";


$('#picOne').fadeIn("slow").animate({ left: "300px", top: "120", width: toggleWidth1, height: toggleHeight1 }, 3000).delay(1000).animate({ left: "450" }, 1000).fadeOut(function () {
$(this).css('top', 50);
$(this).css('left', 380);
$(this).css('width', 10);
$(this).css('height', 10);
});

$('#picThree').delay(10000).fadeIn("slow").animate({ left: "300px", top: "120px", width: toggleWidth3, height: toggleHeight3 }, 3000).delay(1000).animate({ top: "200" }, 1000).fadeOut(function () {
$(this).css('top', 50);
$(this).css('left', 380);
$(this).css('width', 10);
$(this).css('height', 10);
});

$('#picTwo').delay(5000).fadeIn("slow").animate({ left: "300px", top: "120px", width: toggleWidth2, height: toggleHeight2 }, 3000).delay(1000).animate({ left: "100" }, 1000).fadeOut(function () {
$(this).css('top', 50);
$(this).css('left', 380);
$(this).css('width', 10);
$(this).css('height', 10);
});



}
function repeatfunction2() {

$('.glow1').fadeIn("slow").animate({ left: "480px", top: "295px" }, "slow").fadeOut(function () {

$(this).css('left', 0);
$(this).css('top', 255);

});
$('.glow2').fadeIn("slow").delay(1000).animate({ left: "400px", top: "285px" }, "slow").fadeOut(function () {

$(this).css('left', 5);
$(this).css('top', 290);
});
$('.glow3').fadeIn("slow").animate({ left: "20px", top: "255px" }, "slow").fadeOut(function () {

$(this).css('left', 380);
$(this).css('top', 310);
});
$('.glow4').fadeIn("slow").delay(1000).animate({ left: "50px", top: "290px" }, "slow").fadeOut(function () {

$(this).css('left', 480);
$(this).css('top', 350);

});


}





خیلی ممنون میشم پاسخ بدید.

[bftarane]

لطفاً در این مورد هر نظری دارید بدید.

[Javidhb]

وقتی صفحه رو باز میکنم... cpu از 2 درصد میره روی 12 درصد... که نشون میده صفحه تون سنگینه.
اول سعی کنید کدتون رو بهینه کنید:

//اینجوری سریعتره
setInterval(function(){
repeatfunction();
},17000);

//اینجوری هر بار جی کوئری دنبال المنت ها نمیگرده
var pic1 = $("#picOne"),
pic2 = $("#picTwo"),
pic3 = $("#picThree");

function repeatfunction() {
var toggleWidth3 = pic3.width() == 10 ? "400px" : "10px";
var toggleHeight3 = pic3.height() == 10 ? "200px" : "10px";
var toggleWidth1 = pic1.width() == 10 ? "309px" : "10px";
var toggleWidth2 = pic2.width() == 10 ? "309px" : "10px";
var toggleHeight1 = pic1.height() == 10 ? "190px" : "10px";
var toggleHeight2 = pic2.height() == 10 ? "261px" : "10px";


pic1.fadeIn("slow").animate({ left: "300px", top: "120", width: toggleWidth1, height: toggleHeight1 }, 3000).delay(1000).animate({ left: "450" }, 1000).fadeOut(function () {
//بقیه رو هم همینجوری تغییر بدید
$(this).css({'top': '50px', 'left': '380px', 'width': '10px', 'height': '10px'});
});

pic3.delay(10000).fadeIn("slow").animate({ left: "300px", top: "120px", width: toggleWidth3, height: toggleHeight3 }, 3000).delay(1000).animate({ top: "200" }, 1000).fadeOut(function () {
$(this).css('top', 50);
$(this).css('left', 380);
$(this).css('width', 10);
$(this).css('height', 10);
});

pic2.delay(5000).fadeIn("slow").animate({ left: "300px", top: "120px", width: toggleWidth2, height: toggleHeight2 }, 3000).delay(1000).animate({ left: "100" }, 1000).fadeOut(function () {
$(this).css('top', 50);
$(this).css('left', 380);
$(this).css('width', 10);
$(this).css('height', 10);
});
}


در مورد قاطی شدن، عکسها... بعد از اینکه بهم میریزن... دوباره انیمیشنها درست میشن. یعنی اول درست اجرا میشه... بعد بهم میریزه ... دوباره درست میشه .. همینجوری این چرخه ادامه پیدا میکنه.
به احتمال زیاد مشکل از زمانهایی که برای setInterval, delay و animate ها استفاده کردید. اگه زمانهایی که به delay ها , animate ها دادید رو جمع بزنید... بیشتر از 17 ثانیه ای میشه که به setInterval دادید.

[bftarane]

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

وقتی صفحه رو باز میکنم... cpu از 2 درصد میره روی 12 درصد... که نشون میده صفحه تون سنگینه.
اینکه عکسهای سنگین هم استفاده شده می تونه در مشکلی که شما مطرح کردید نقشی داشته باشه یا مسئله مربوط به همون بهینه نبودن کدهای جی کوئری میشه؟

[bftarane]

سعی کردم کدها رو بهینه کنم با روشهایی که شما گفتید
کدهای جدید رو اینجا می تونید ببینید
http://jsfiddle.net/KfrU6/6/

به احتمال زیاد مشکل از زمانهایی که برای setInterval, delay و animate ها استفاده کردید. اگه زمانهایی که به delay ها , animate ها دادید رو جمع بزنید... بیشتر از 17 ثانیه ای میشه که به setInterval دادید.
در مورد جمع زمانهای Delay و animate
یک مسئله ای که وجود داره اینه که من زمان که می گیرم
در مدت تقریباً 17 ثانیه دور اول تموم میشه یعنی سه تا عکس میان و محو می شن

وقتی این 17 رو افزایش می دم یک تأخیری بین دور اول و دور دوم ایجاد میشه در صورتی که من می خوام بلافاصله که دور اول تموم شد دور دوم شروع بشه یا حداقل یک تأخیر فقط 2 ثانیه ای وجود داشته باشه نه بیشتر

حساب هم که می کنم همون 17 ثانیه میشه
در واقع از نظر من ما نباید تمام زمان ها رو با هم جمع کنیم
اگه عکس زیر رو ببینید متوجه می شید من چطور حساب می کنم
115822
که نتیجه نهایی شد 15 ثانیه که من 2 ثانیه هم از این 15 ثانیه بیشتر گذاشتم مقدار
setinterval رو
حالا با این تفاسیر اگه ایده ای در مورد حل این مشکل به نظرتون می رسه لطفاً راهنمایی کنید

[Javidhb]

زمان fadeIn و fadeOut رو هم حساب کرده بودم... که 6 بار ازشون استفاده کردید که روی هم تقریبا میشن 3 ثانیه => 15 + 3 = 18 ثانیه که الان کدتون داره با 18 ثانیه درست کار میکنه...
یا مشکل هنوز حل نشده؟

[bftarane]

نه متأسفانه حل نشده الآن سه بار صفحه رو بیکار گذاشتم و تست کردم دفعه اول مشکلی ندیدم ولی دفعه دوم یکی از عکسها در اندازه بسیار کوچک مثلاً 3 پیکل در 3 پیکسل ظاهر شد که اینم می دونم مربوط به زمانبندی میشه یعنی تایم یه جوری هست که اون عکس وقت نکرده بزرگ بشه (یه همچین چیزی) و دفعه سوم هم همون با هم اومدن عکس ها رو مشاهده کردم.
راستی من سوالم رو در لینک زیر هم پرسیده بودم
http://forums.asp.net/t/1963055.aspx?timing+doesn+t+work+correct+when+page +is+Idle+for+a+while
اومده یه جوابی داده ولی برای من خیلی سخته کدام رو به اون حالت دربیارم، یعنی بیشتر فکر میکنم اونم اومده در بهینه نوشتن و داینامیک تر نوشتن کد رو پیشنهاد داده ولی نمی فهمم روش ایشون چه کمکی به حل مشکل من می کنه؟ سوادم در زمینه جی کوئری اونقدر نیست که بخوام اونم به زبان انگلیسی در موردش بحث کنم.
شما اگه از اون لینک راه حلی برای مشکل من دستگیرتون میشه ممنون میشم راهنماییم کنید.

من در صفحه دوم سایت هم از همین روش استفاده کرده بودم و یه سری متن میان و میرن و اون هم همین مشکل رو داره که صفحه بیکار می مونه بعد جمله ها با هم تداخل می کنن
نمی دونم مشتری یه سایت خارجی دیده بود که خواسته بود عین اون طراحی کنیم. ما هم فلش حتی الامکان استفاده نمی کنیم اشتباه من بود که سعی کردم فلش ها رو با جی کوئری مشابه سازی کنم که کلی هم وقت گرفت قشنگ هم نشد اصلاً. اصلاً از این کاری که انجام دادم خوشم نمی یاد. ولی دیگه یه کاریه که شروع کردم و دوست دارم مشکلاتش رفع بشه.

[Javidhb]

اون روشی که توی لینکی که گذاشتید: هر چی هست به دردسرش نمی ارزه (راستش زیاد ازش سر در نیاوردم!)

در مورد جاوااسکریپت و فلش: شما انتخاب درستی کردید و جاوااسکریپت اینجا مناسبتره... فلش رو باید فقط جاهای استفاده کنید که جاوااسکریپت قدرت انجام کار رو نداشته باشه.

در مورد قشنگیش: با افکت بیشتر و متنوع تر میشه درستش کرد.... الان تقریبا افکت عکسها شبیه به همن.

اما از اول کدتون (بیشترش) رو ادیت کردم، اینجوری شد: (تا زمانی که داشتم این متن رو مینوشتم براش مشکلی پیش نیومده!)

خاستم توی jsfiddle دموش رو بزارم اما اونجا کلا بهم ریخت! ولی توی مرورگرهای خودم بدون مشکل داره اجرا میشه!!!


//تعریف متغیرها
var pic1, pic2, pic3;
var spans, spanLength;
var repeatTimeout, reapeat2Timeout, textTimeout;

$(document).ready(function () {
//انتخاب عکسها
pic1 = $("#picOne");
pic2 = $("#picTwo");
pic3 = $("#picThree");

//انتخاب حروف نوشته
spans = $('span'); //ذخیره المنت توی متغیر
spanLength = spans.length;//تعداد المنتهای مربوط به حروف

//اجرای تابع ها
repeatfunction();
text();
repeatfunction2();
});


function text() {
spans.hide(); //مخفی کردن حروف

//حلقه برای اعمال افکت روی تک تک حروف
for(var i=0; i<spanLength; i++){
//queue = perfect for destroying incomplete actions
//next = کنسل کردن تمام کارهای قبلی و رفتن سراغ اعمال افکتهای بعدی
$('span').delay(1000).eq(i).fadeIn().animate({ top: "50" }).delay(14000).queue(function(next){
$(this).fadeOut(function () {
$(this).css('top', 0);
});
next();
});

//بجای setInterval
//اینجوری صد درصد مطمئن میشیم که افکتی ناقص نمونده
clearTimeout(textTimeout);
textTimeout = setTimeout(function(){
text();
}, 27000);
}
}

function repeatfunction() {
pic1.fadeIn("slow").animate({ left: "300px", top: "120", width: "309px", height: "190px" }, 3000).delay(1000).animate({ left: "450" }, 1000).fadeOut(function () {
$(this).css({'top': '50px', 'left': '380px', 'width': '10px', 'height': '10px'});
});
pic2.delay(6000).fadeIn("slow").animate({ left: "300px", top: "120", width: "309px", height: "261px" }, 3000).delay(1000).animate({ left: "100" }, 1000).fadeOut(function () {
$(this).css({'top': '50px', 'left': '380px', 'width': '10px', 'height': '10px'});
});
pic3.delay(12000).fadeIn("slow").animate({ left: "300px", top: "120", width: "400px", height: "200px" }, 3000).delay(1000).animate({ top: "200" }, 1000).fadeOut(function () {
$(this).css({ 'top': '50px', 'left': '380px', 'width': '10px', 'height': '10px' });
});

//بجای setInterval
//اینجوری صد درصد مطمئن میشیم که افکتی ناقص نمونده
clearTimeout(repeatTimeout);
repeatTimeout = setTimeout(function(){
repeatfunction();
}, 18000);
}

//با این تابع کاری نداشتم.....
function repeatfunction2() {
//اینجوری هر بار که تابع اجرا میشه بازم میره این المنتهای رو میگرده و توی متغیر ذخیره میکنه
//روش بهینه تر اینه که مثل دو تا تابع قبلی متغیر ها رو فقط یه بار پیدا و ذخیره کنید
var glow1 = $("#glow1"),
glow2 = $("#glow2"),
glow3 = $("#glow3"),
glow4 = $("#glow4");
glow1.fadeIn("slow").animate({ left: "480px", top: "295px" }).fadeOut(function () {
$(this).css({ 'left': '0px', 'top': '255px' });
});
glow2.fadeIn("slow").delay(1000).animate({ left: "400px", top: "285px" }).fadeOut(function () {
$(this).css({ 'left': '5px', 'top': '290px' });
});
glow3.fadeIn("slow").animate({ left: "20px", top: "255px" }).fadeOut(function () {
$(this).css({ 'left': '380px', 'top': '310px' });
});
glow4.fadeIn("slow").delay(1000).animate({ left: "50px", top: "290px" }).fadeOut(function () {
$(this).css({ 'left': '480px', 'top': '350px' });
});

//بغیر اینجا که مثل تابع های قبلیه
clearTimeout(reapeat2Timeout);
reapeat2Timeout = setTimeout(function(){
repeatfunction2();
}, 2000);
}

[bftarane]

ممنون. کدتون رو تست می کنم.
ولی یه مسئله جالب با جستجو متوجه شدم اون جوابی که در سایت asp.net برام گذاشته شده دقیقاً از لینک زیر برداشته شده
http://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome
یعنی به این نتیجه رسیدم که این مشکل فقط مشکل کدهای من نیست. راستش امروز وقت زیادی نکردم سراغ تست جوابی که در اون سایت بهم داده شده برم ولی تستش می کنم و اگه به نتیجه رسیدم اینجا مطرح می کنم.
کدهای شما رو هم تست می کنم.
ممنون از کمکتون.

[jalil_gh]

من یه دمو ایجاد کردم از حالت ساده شده ی افکت عکس‌های شما. اگه از این روش برید فکر کنم راحت‌تر باشه.
دمو (http://jsfiddle.net/K4pKW/2/)

[bftarane]

ممنون. لطف کردید. غروب برسم خونه تست می کنم.