मेरे पास एक कस्टम खिलाड़ी है जो मेरा क्लाइंट उपयोग कर रहा है, और उन्होंने जावास्क्रिप्ट दिया कि उन्होंने मुझे बुरा दिया है ... असली बुरा। मैं वास्तव में इसे खरोंच से फिर से नहीं करना चाहता, इसलिए मैंने सोचा कि मैं उनका मूल कोड ले सकता हूं
var togglePlayer = function(){
$(".jp-gui").slideUp();
$("#jp_container, #jp_container2").hover(
function () {
$(".jp-gui").slideDown();
},
function () {
$(".jp-gui").slideUp();
}
);
};
मैंने इसे इसके साथ ठीक करने की कोशिश की:
var togglePlayer = function(){
$(".jp-gui").slideUp();
$("#jp_container, #jp_container2").hover(
function () {
$(this + ".jp-gui").slideDown();
},
function () {
$(this + ".jp-gui").slideUp();
}
);
};
अब यह केवल मँडरा नहीं स्वीकार करने के लिए तेजी है। मैं इसे पूरी तरह से एक .toggleSlide के साथ फिर से लिखता हूं, जिसने हॉवर की समस्या को ठीक कर दिया है लेकिन 10 और समस्याएं खड़ी कर दी हैं।
किसी को भी एक आसान तय पता है कि जब मैं #jp_container पर होवर करता हूं तो यह "jp_container2 और इसके विपरीत पर हॉवर एनीमेशन नहीं करता है?"
उत्तर:
जवाब के लिए 3 № 1$("#jp_container, #jp_container2").hover(function() {
$(this).find(".jp-gui").stop(true, true).slideToggle();
});
जवाब के लिए 0 № 2
function () {
$(this + ".jp-gui").slideDown();
},
thisएक jQuery के ईवेंट हैंडलर के संदर्भ में, वह DOM एलीमेंट है जिसमें हैंडलर अटैच किया गया था (या डेलिगेशन, इवेंट डेलिगेशन के मामले में)। इसे स्ट्रिंग में बदलना अच्छा नहीं होगा।
प्रयत्न:
function () {
$(".jp-gui", this).slideDown();
},
(फिर दूसरे तर्क को संदर्भ कहा जाता है) या
function () {
$(this).find(".jp-gui").slideDown();
},
बजाय। दोनों सभी का चयन करेंगे .jp-gui ईवेंट लक्ष्य के भीतर तत्व (#jp_container या #jp_container2)।
यदि आप और बदलाव करना चाहते हैं, तो ध्यान दें
#jp_container, #jp_container2 कभी-कभी के साथ प्रतिस्थापित किया जा सकता है [id^="jp_container"] (उन सभी तत्वों का चयन करें जिनकी आईडी निर्दिष्ट स्ट्रिंग से शुरू होती है)। दोनों कंटेनरों में एक सामान्य वर्ग जोड़ना और भी बेहतर होगा।
इसके अलावा, @Michael, की एक जोड़ी द्वारा नोट किया गया है slideUp/slideDown एक एकल द्वारा प्रतिस्थापित किया जा सकता है slideToggle। यह हमेशा सबसे अच्छा समाधान नहीं हो सकता है, लेकिन यह कोड को छोटा करता है।
@ मिचेल भी पिछले एनीमेशन को रोकने का सुझाव देता है stop(true, true)। यदि आप एनीमेशन बंद नहीं करते हैं, तो अगले एकवर्तमान एनीमेशन के बाद देरी हो जाएगी (s enqueued), जो कई हॉवर घटनाओं को उत्पन्न करने के बाद तत्व को बार-बार ऊपर और नीचे स्लाइड करने का कारण हो सकता है। यदि कंटेनर अपना आकार बदलता है या उसका बच्चा अपने कंटेनर से बच जाता है, तो बिना stopएक अनंत लूप पाने के लिए भी संभव हो सकता है यदि प्रत्येक एनीमेशन एक अतिरिक्त हॉवर घटना को ट्रिगर करता है।