اجرای انیمیشن بعد از زمانی مشخص

[prince4prodigy]

سلام
من یه عکس دارم که برای اون رویداد های mouseover و mouseout رو تعریف کردم که یه ترتیب موجب zoomIn و zoomOut میشه.

سوالم اینه که میخوام عملکرد zoomIn بعد از حداودا یک ثانیه که موس روی عکس بود اتفاق بیفته نه بصورت آنی.

$(document).ready(function(e) {
$('img').bind('mouseover',function(){
$('img').animate({width:'+=40px',height:'+=58px'}, 400)
})

$('img').bind('mouseout',function(){
$('img').animate({width:'-=40px',height:'-=58px'},100)
})
});

با تشکز

[mehdi.mousavi]

سلام.
برای اینکار چند روش وجود داره:


timer ای تعریف کنید و هنگام hover شدن اونو start کنید. اگر mouse از محدوده مورد نظر قبل از expire شدن timer خارج شد، باید timer رو clear کنید. اگر هم این اتفاق نیفتاد، اونوقت timer مورد نظر expire میشه و میتونید در Handler مربوطه، animation رو شروع کنید. (این روش رو در این آدرس (http://jelaniharris.com/2008/adding-a-delay-to-jquery-functions/) م تونید مشاهده کنید).
از hoverIntent jQuery Plugin (http://cherne.net/brian/resources/jquery.hoverIntent.html) استفاده کنید.
از این jQuery Plugin با حجم اندک (https://github.com/jterenzio/jQuery-Hover-Delay/blob/master/jquery.hoverdelay.js) نیز استفاده کنید. این Plugin به متود hover اراتر سومی به اسم delay اضافه میکنه که به شما اجازه میده تا تاخیر مورد نظر رو ایجاد کنید.
از promise و deferred object ها در jQuery برای اینکار نیز استفاده کرد.

موفق باشید.

[prince4prodigy]

ممنون از راهنماییتون . متاسفانه فعلا اطلاعات زیادی در مورد پلاگین ها ندارم.
اگه ممکنه یه نگاهی به این تایپیک هم بندازید.
http://barnamenevis.org/showthread.php?362913-%DA%A9%D9%84%D8%A7%D8%B3-%D9%87%D8%A7