jquery addclass/removeclass हमेशा काम नहीं करता है जब "गति" सेट होता है (माउस ईवेंट)

Question

सीएसएस वर्ग "कर्मचारी_माउसओवर" में मैं बीजी रंग लाल बना देता हूं।

 $(".employee").bind("mouseenter", function() { 
      $(this).addClass("employee_mouseover"); 
     }); 
     $(".employee").bind("mouseleave", function() { 
      $(this).removeClass("employee_mouseover"); 
     }); 

यह ठीक काम करता है।

लेकिन, जब मैं इसे और अधिक सुंदर बनाने के लिए गति निर्धारित करता हूं, तो जब मैं जल्दी से माउससेटर + माउसलेव करता हूं तो तत्व लाल रहता है;

$(".employee").bind("mouseenter", function() { 
     $(this).addClass("employee_mouseover", "fast"); 
    }); 
    $(".employee").bind("mouseleave", function() { 
     $(this).removeClass("employee_mouseover", "fast"); 
    }); 

यह ठीक से काम नहीं करता है, जब तक कि मैं बहुत धीरे-धीरे तत्व से बाहर नहीं जाता।

क्या ऐसा करने का कोई बेहतर तरीका है?

अग्रिम धन्यवाद।

Answer 1

यह किया जा सकता है, लेकिन आपको jquery coloranimate plugin इंस्टॉल करने की आवश्यकता है। jQuery UI docs से

$(".employee").bind("mouseenter", function() { 
    $(this).animate({backgroundColor: "#bbccff"}, "slow"); 

}); 
$(".employee").bind("mouseleave", function() { 
    $(this).animate({backgroundColor: "white"}, "slow"); 
}); 

Answer 2

हाँ, इसे सीएसएस में करें!

.employee:hover{background:pink;} 

इसके अलावा, there is no speed parameted for addClass, गति केवल प्रभाव के लिए मौजूद है।

Answer 3

addClass तत्वों को सीएसएस कक्षाएं जोड़ने के लिए है। यदि आप कुछ सीएसएस संपत्ति को ट्विनिंग द्वारा बदलना चाहते हैं, तो आपको स्पष्ट रूप से Effects का उपयोग करने की आवश्यकता है।

आपका कोड:

$(this).addClass("employee_mouseover", "fast"); 

this को दो वर्गों, employee_mouseover और fast जोड़ देगा, जो स्पष्ट रूप से नहीं है क्या आप के बाद कर रहे हैं।

Answer 4

आप गलत घटना का उपयोग कर रहे हैं। आप चाहते हैं:

$(".employee").hover(function() { 
$(this).addClass("employee_mouseover"); 
}, function() { 
$(this).removeClass("employee_mouseover"); 
}); 

और कक्षा को जोड़ने या निकालने पर कोई गति तर्क नहीं है।

Answer 5

: तो फिर तुम रंग धीरे-धीरे बदलने के लिए नीचे दिए गए कोड का उपयोग कर सकते

jQuery यूआई प्रभाव कोर आधार वर्ग एपीआई फैली दो अलग-अलग वर्गों के बीच चेतन करने में सक्षम हो। निम्नलिखित विधियां बदल दी गई हैं। अब वे तीन अतिरिक्त पैरामीटर स्वीकार करते हैं: गति, आसान (वैकल्पिक), और कॉलबैक।

तो @ थॉमस में अपने पृष्ठ पर jQuery और jQuery UI लाइब्रेरी दोनों शामिल होना चाहिए, जो गति और कॉलबैक पैरामीटर को addClass और removeClass में सक्षम बनाता है।

Answer 6

इसके अलावा, ऐडक्लास के लिए कोई गति पैरामीटर नहीं है, गति केवल प्रभाव के लिए मौजूद है।

सही।

लेकिन शायद इस प्लगइन मदद कर सकता है:

animate-to-class

Answer 7

भले ही आप jQueryUI ठीक से शामिल हैं, इन सभी एफएफ के बाहर विफल जब आप "अवधि" पैरामीटर का उपयोग दिखाई देते हैं। आईई में जेएस त्रुटियों का कारण बनता है। मैं एनिमेट करने के लिए चिपक जाएगा() जो बेकार है।

http://jqueryui.com/docs/addClass/

http://jqueryui.com/docs/removeClass/

http://jqueryui.com/docs/switchClass/

http://jqueryui.com/docs/toggleClass/

वहाँ jQueryUI साइट पर डॉक्स में इस का कोई नोट है।

Answer 8

$(".employee").hover(function() { 
    $(this).stop().animate({ backgroundColor: "#bbccff" }, "slow"); 
}, function() { 
    $(this).stop().animate({ backgroundColor: "white" }, "slow"); 
}); 

Answer 9

removeClass (http://docs.jquery.com/UI/Effects/removeClass) के लिए एक अवधि पैरामीटर नहीं है, लेकिन यह एफएफ में काम नहीं कर रहा है। क्या मेरे कोड के साथ कुछ गलत है? मैं JQuery के लिए नया हूँ। मैं अब एनिमेट फ़ंक्शन का प्रयास करने जा रहा हूं।

जो मैं यहां करने की कोशिश कर रहा हूं वह एंकर का उपयोग करता है और फिर एंकर पर क्लिक होने पर गंतव्य एंकर स्थान को हाइलाइट करता है। यहाँ मेरी एचटीएमएल कोड है -

<ul> 
       <li><a href="#caricatures">Caricatures</a></li> 
       <li><a href="#sketches">Sketches</a></li> 
</ul> 

मेरे गंतव्य लंगर है -

<a href="#" id="caricatures"><h3>Caricatures</h3></a> 

यह वह जगह है जहाँ मैं पृष्ठभूमि का रंग बदलने के लिए हो सकता है।

<style> 
      .spotlight{ 
       background-color:#fe5; 
      } 
</style> 

यहाँ मेरी JQuery कोड है - -

<script> 
    $('a[href$="caricatures"]').click(function(){ 
     $('a[id="caricatures"] h3').addClass("spotlight"); 
     $('a[id="caricatures"] h3').removeClass("spotlight",1000); 
    }); 
    </script> 

Answer 10

आप CSS3 के संक्रमण का उपयोग कर सकते हैं इस प्रभाव को प्राप्त करने के लिए

यहाँ मेरी सीएसएस है।

a:hover { 
    color: red; 
    -webkit-transition: 1s color linear; 
    -moz-transition: 1s color linear; 
} 

a:link, a:visited { 
    color: white; 
    -webkit-transition: 1s color linear; 
    -moz-transition: 1s color linear; 
} 

Answer 11

यहाँ jQuery के साथ अपने संक्रमण है:

$("#layoutControl .actionList").click(
    function(){ 
     $("#assetsContainer").fadeOut("fast",function(){ 
      $(this).removeClass("assetsGrid").addClass("assetsList"); 
      $("#iconList").attr("src", "/img/bam/listIcon.png"); 
      $("#iconGrid").attr("src", "/img/bam/gridIconDim.png"); 
      $(this).fadeIn("fast"); 
     }); 
    } 
);