बाहर ग्रे divs JQuery

Question

इम का उपयोग करते हुए इस कोड का उपयोग करने की कोशिश कर:

<script> 
jQuery('#MySelectorDiv').fadeTo(500,0.2); 
</script> 

MySelectorDiv नामित divs का एक समूह बाहर फीका करने के लिए, केवल एक चीज है, यह केवल बाहर उन सभी के बजाय 1 एक fades। .. ऐसा क्यों है?

मैं भी रोलओवर पर div को अनदेखा करना चाहता हूं, इसलिए मूल रूप से सभी divs को सक्रिय किए जाने के अलावा ग्रे को बाहर कर दिया जाएगा।

आशा है कि आप समझें।

Answer 1

केवल पहला वाला फीका जा रहा है क्योंकि आप कक्षा के बजाय आईडी का उपयोग कर रहे हैं।

आप अपने सभी divs बाहर फीका तो बजाय ऐसा करने से करना चाहते हैं:

<div id="MySelectorDiv">...</div> 

ऐसा करते हैं:

<div class="MySelectorDiv">...</div> 

और '.MySelectorDiv'

कारण करने के लिए अपने jQuery चयनकर्ता स्ट्रिंग को बदलने यह वर्तमान में काम नहीं करता है क्योंकि आईडी पृष्ठ पर अद्वितीय होना चाहिए, इसलिए jQuery सभी तत्वों को ढूंढने से परेशान नहीं होगा, केवल उस आईडी से मेल खाने वाला पहला व्यक्ति होगा।

हॉवर पर fading के लिए के रूप में:

$(".MySelectorDiv") 
    .fadeTo(500, 0.2) 
    .hover(function() { 
     $(this).fadeTo(500, 1); 
    }, function() { 
     $(this).fadeTo(500, 0.2); 
    }); 

यह पहली बार अपने divs fades, तो उन पर एक मंडराना घटना देता - जहां पहले समारोह चलाया जाता है जब माउस क्षेत्र में प्रवेश करती है और दूसरी समारोह जब चलाया जाता है आपका माउस क्षेत्र छोड़ देता है।

Answer 2

क्योंकि आप एक आईडी का उपयोग कर रहे हैं, कक्षा नहीं। आईडी को पृष्ठ पर अद्वितीय होना चाहिए, जबकि कक्षाओं को दोहराया जा सकता है। किसी आईडी के बजाय कक्षा = "myselectordiv" का उपयोग करने के लिए बस अपने सभी divs को बदलें।

jQuery('.myselectordiv')... 

रोल ओवर प्रभाव प्राप्त करने के लिए:: अपने jQuery चयनकर्ता तो करने के लिए बदल जाएगा

// Fade everything out first 
jQuery('.myselectordiv').fadeTo(500, 0.2); 
jQuery('.myselectordiv').hover(function() { 
    // Mouse enter, fade in 
    jQuery(this).fadeTo(500, 1); 
}, function() { 
    // Mouse leave, fade out 
    jQuery(this).fadeTo(500, 0.2); 
}); 

यह आपके divs करने के लिए दो काम करता है, mouseenter के लिए एक और mouseleave के लिए एक बांधता है, और जैसा कि आप देख सकते हैं वे एक दूसरे के विपरीत विपरीत फीड करो।

नोट: इसके साथ एक सूक्ष्म समस्या है, हालांकि, यदि आप अपने माउस को divs पर जल्दी से ले जाते हैं तो आप देखेंगे। अपने माउस को div से बाहर ले जाने के बाद भी, अगर यह अभी भी इसे लुप्त कर रहा था, तो यह फिर से फीका होने से पहले एनीमेशन को पूरा करना जारी रखेगा। यह हो सकता है कि आप क्या चाहते हैं, लेकिन यदि आप अपने माउस को दो divs के बीच जल्दी से ले जाते हैं, तो वे दोनों लगातार बाद में बाहर निकल जाएंगे क्योंकि एनीमेशन प्रभावों की एक लंबी कतार ढीली हुई है। इसे रोकने के लिए, प्रत्येक fadeTo() मंडराना अंदर से पहले एक .stop() जोड़ें:

jQuery(this).stop().fadeTo(500, 1); 

डेमो: http://jsfiddle.net/mm8Fv/