मैंने एक छोटे एनीमेशन काम के लिए JQuery का उपयोग किया है: एक तालिका #photos 9 फ़ोटो हैं और मैं चौड़ाई और ऊंचाई का उपयोग करना चाहूंगा animate माउसओवर पर कार्य। लेकिन जब एनीमेशन चल रहा होता है यदि उपयोगकर्ता माउस को किसी अन्य फोटो पर ले जाता है तो यह स्वचालित रूप से अगले एनीमेशन को ट्रिगर करता है, इसलिए यह पूरी तरह से भ्रमित है। मुझे क्या करना चाहिए? मेरा कोड है:
$(function(){
$("#photos tr td img").mouseover(function(){
$(this).animate({"width":"1000px","height":"512px"},2000)
});
$("#photos tr td img").mouseout(function(){
$(this).animate({"width":"100px","height":"50px"},2000)
});
});
उत्तर:
उत्तर № 1 के लिए 6एनीमेशन पूर्ण होने पर JQuery कॉलबैक प्रदान करता है। तब यह उदाहरण के लिए इस तरह लग सकता है:
var animating = false;
$(function(){ $("#photos tr td img").mouseover(
function()
{
if(!animating)
$(this).animate({"width":"1000px","height":"512px"},2000, easing, function() { animating = true; });
});
$("#photos tr td img").mouseout(
function()
{
$(this).animate({"width":"100px","height":"50px"},2000, easing, function() { animating = false; })
});
});
जवाब के लिए 4 № 2
गड़बड़ी से बचने के लिए एक नया शुरू करने से पहले आपको किसी भी चालू एनीमेशन को रोकना चाहिए यह इस विशिष्ट समस्या के लिए शायद सबसे अच्छा और सीधा समाधान है।
$(function(){
$("#photos tr td img").mouseover(function(){
$(this).stop();
$(this).animate({"width":"1000px","height":"512px"},2000)
});
$("#photos tr td img").mouseout(function(){
$(this).animate({"width":"100px","height":"50px"},2000)
});
});
उत्तर № 3 के लिए 1
अन्य उत्तरों के अतिरिक्त मैं इसका उपयोग करूंगा hoverIntent लगाना। जब उपयोगकर्ता सभी तस्वीरों पर माउस को घुमाता है, तो यह एक विशाल एनीमेशन कतार को स्थापित करने से बचता है। आप वास्तव में केवल एनीमेशन चाहते हैं यदि उपयोगकर्ता वास्तव में मँडरा है।
उत्तर के लिए 1 № 4
मुझे लगता है कि उत्तर इस बात पर निर्भर करता है कि आप दूसरे मूसओवर पर क्या करना चाहते हैं (जबकि पहले वाला अभी भी एनिमेशन कर रहा है)
1) यदि आप कुछ नहीं करना चाहते हैं, तो आप अपने पहले होवर को पूरे टीआर पर "एनिमेटिंग" स्थिति सेट कर सकते हैं, शायद इस तरह:
$tr = $(this).closest("tr");
if ($tr.data("animating") != true) {
$tr.data("animating",true);
$(this)
.stop(true,false)
.animate({"width":"1000px","height":"512px"},2000, function(){
$tr.data("animating",false);
});
}
2) यदि आप मूल एनीमेशन को समाप्त करना चाहते हैंआपकी नई छवि चेतन कर सकती है, आपको ".opop () क्लियरक्यू और goToEnd मापदंडों के साथ पुराने को सही करने की आवश्यकता होगी। यह सुनिश्चित करेगा कि अतिरिक्त कतारबद्ध घटनाएँ (एक पूरे झुंड से) डॉन" टी "बस के लिए ही होती रहें मिनट, और यह "एनीमेशन को तुरंत अपनी अंतिम स्थिति में छोड़ देगा:
$(this).closest("tr").find("img:animated").stop(true,true);
$(this).animate({"width":"1000px","height":"512px"},2000});
जवाब के लिए 0 № 5
हमेशा तत्व की कतार की जाँच करें और कभी भी संघर्ष न करें:
$(function(){
$("#photos tr td img").mouseover(function(){
if($(this).queue("fx").length == 0)
$(this).animate({"width":"1000px","height":"512px"},2000)
});
$("#photos tr td img").mouseout(function(){
$(this).animate({"width":"100px","height":"50px"},2000)
});
});