माउसओवर पर jquery निरंतर एनीमेशन

Question

मैं एक एनीमेशन चलाने के लिए केवल एक एनीमेशन चलाने की कोशिश कर रहा हूं जब माउस किसी ऑब्जेक्ट पर हो। मैं एनीमेशन का एक पुनरावृत्ति प्राप्त कर सकता हूं और फिर इसे माउस पर सामान्य पर वापस सेट कर सकता हूं। लेकिन मैं एनीमेशन को माउसओवर पर लूप करना चाहता हूं। SetInterval का उपयोग करके, मैं इसे कैसे करूँगा? मैं थोड़ा फंस गया हूँ।

Answer 1

यह इस तरह किया जा सकता है:

$.fn.loopingAnimation = function(props, dur, eas) 
{ 
    if (this.data('loop') == true) 
    { 
     this.animate(props, dur, eas, function() { 
      if($(this).data('loop') == true) $(this).loopingAnimation(props, dur, eas); 
     }); 
    } 

    return this; // Don't break the chain 
} 

अब, आप ऐसा कर सकते हैं:

$("div.animate").hover(function(){ 
    $(this).data('loop', true).stop().loopingAnimation({ left: "+10px"}, 300); 
}, function(){ 
    $(this).data('loop', false); 
    // Now our animation will stop after fully completing its last cycle 
}); 

यदि आप एनीमेशन चाहता था तुरंत रोक, आप hoverOut लाइन को बदल सकता है पढ़ने के लिए :

$(this).data('loop', false).stop(); 

Answer 2

setInterval टाइमर को अक्षम करने के लिए clearInterval पर एक आईडी लौटा दी जा सकती है।

आप लिख सकते हैं निम्नलिखित:

var timerId; 

$(something).hover(
    function() { 
     timerId = setInterval(function() { ... }, 100); 
    }, 
    function() { clearInterval(timerId); } 
); 

Answer 3

पर विचार करें:

साथ

<div id="anim">This is a test</div> 

:

#anim { padding: 15px; background: yellow; } 

और:

var over = false; 
$(function() { 
    $("#anim").hover(function() { 
    over = true; 
    grow_anim(); 
    }, function() { 
    over = false; 
    }); 
}); 

function grow_anim() { 
    if (over) { 
    $("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim); 
    } 
} 

function shrink_anim() { 
    $("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim); 
} 

आप इसे टाइमर का उपयोग करके भी प्राप्त कर सकते हैं।

Answer 4

मैं पृष्ठ पर एक से अधिक वस्तु के लिए काम करने के लिए यह आवश्यक तो मैं एक छोटे से कि्लिटस के कोड को संशोधित: समस्याओं wtih प्रत्यावर्तन के कारण

var over = false; 
$(function() { 
    $("#hovered-item").hover(function() { 
    $(this).css("position", "relative"); 
    over = true; 
    swinger = this; 
    grow_anim(); 
    }, function() { 
    over = false; 
    }); 
}); 

function grow_anim() { 
    if (over) { 
    $(swinger).animate({left: "5px"}, 200, 'linear', shrink_anim); 
    } 
} 

function shrink_anim() { 
    $(swinger).animate({left: "0"}, 200, 'linear', grow_anim); 
}