jQuery परिवर्तन सीएसएस विशेषता धीरे

Question

मैं इस मामले के लिए इस कोड को

$('#uiAdminPanelMenu li a').hover(function(){ 
    $(this).css('background-color', '#D3E1FA'; 
}, 
function(){ 
    $(this).css('background-color', '#F4F4F4'); 
}); 

यह लिंक की पृष्ठभूमि का रंग बदल जाता है, लेकिन मैं यह धीरे धीरे इसे बदलने के लिए, फीका प्रभाव की तरह थोड़े चाहते हैं, लेकिन।

Answer 1

आप CSS3 के संक्रमण के साथ इसी कार्य को पूरा कर सकते हैं। नतीजा लगभग सटीक होगा।

#uiAdminPanelMenu li a { 
    background-color: F4F4F4; 
    -webkit-transition: background-color 0.4s ease; 
    -moz-transition: background-color 0.4s ease; 
    -o-transition: background-color 0.4s ease; 
    transition: background-color 0.4s ease; 
} 

#uiAdminPanelMenu li a:hover { 
    background-color: D3E1FA; 
} 

Answer 2

आप animate() का उपयोग करना चाहते हैं, लेकिन आपको Color Plugin for jQuery की भी आवश्यकता है।

रंग प्लगइन शामिल के साथ, निम्नलिखित कोड अच्छी तरह से काम करता है:

$('#uiAdminPanelMenu li a').hover(function(){ 
    $(this).animate({'background-color': '#D3E1FA'}, 'slow'); 
}, 
function(){ 
    $(this).animate({'background-color': '#F4F4F4'}, 'slow'); 
}); 

Answer 3

इस प्रश्न का उत्तर देने में बहुत देर हो सकती है, लेकिन फिर भी एक वैकल्पिक समाधान प्रदान करना चाहता था जो मेरे लिए काम करता था। (पहले प्रदान किए गए दोनों उत्तर काम करेंगे)। मैंने सीएसएस एनीमेशन का उपयोग किया और यह कुछ अन्य मामलों में jquery एनिमेट की तुलना में मेरे लिए बेहतर काम किया। आप नीचे दिए गए कोशिश कर सकते हैं -

// 'bcolor' एनीमेशन-फ़्रेम नाम बाद में परिभाषित किया गया है

#uiAdminPanelMenu li a:hover { 
    -webkit-animation-name: bcolor; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-name: bcolor; 
    -moz-animation-duration: 1s; 
    -moz-animation-fill-mode: forwards; 
    animation-name: bcolor; 
    animation-duration: 1s;  
    animation-fill-mode: forwards; 
} 

@-webkit-keyframes shadeOn { 
    from {background-color: #F4F4F4;} 
    to {background-color: #D3E1FA;} 
} 
@-moz-keyframes shadeOn { 
    from {background-color: #F4F4F4;} 
    to {background-color: #D3E1FA;} 
} 
@keyframes shadeOn { 
    from {background-color: #F4F4F4;} 
    to {background-color: #D3E1FA;} 
}