मैं वर्तमान छवि को मिटाने के लिए मानस के ऊपर एक बहुत ही सरल छवि परिवर्तन कर रहा हूं, छवि का src बदलना, और फिर छवि में वापस आना। यहां मूल कोड है ...
$("#picViewer").fadeOut("slow");
document.getElementById("picViewer").src = "myImage.jpg";
$("#picViewer").fadeIn("slow");
के बजाय ...
- छवि को मिटाना
- सीनियर को बदलें
- नई छवि में फीका
जावास्क्रिप्ट "खत्म होने के लिए फीका इंतजार नहीं करता है और यह वही है जो आप देखते हैं ...
- छवि src बदलें
- फेड आउट
- में फीका
क्या मैं कुछ भूल रहा हूँ? यहाँ भी एक बोनस है, ... होगा JQuery मुझे सफेद के अलावा एक अलग रंग के लिए फीका करने की अनुमति दें या क्या मुझे स्थिति के आसपास काम करने के लिए ठेठ हैकरी नियोजित करना चाहिए?
उत्तर:
जवाब के लिए 3 № 1का वैकल्पिक दूसरा पैरामीटर fadeOut एक कॉलबैक फ़ंक्शन है जिसे तत्व समाप्त होने के बाद कॉल किया जाएगा।
$("#picViewer").fadeOut("slow", function() {
document.getElementById("picViewer").src = "myImage.jpg";
$("#picViewer").fadeIn("slow");
});
जवाब के लिए 4 № 2
.fadeOut एक बार किए गए कॉलबैक को स्वीकार करता है। आप वहां से हटने के बाद जो चाहें करना चाहते हैं।
कॉलबैक फ़ंक्शन भी प्रदान करता है this उस तत्व के रूप में जो अभी बाहर निकलता है। आप पुनः उपयोग कर सकते हैं this इसके बजाय का उपयोग करने के लिए id फिर से हार्ड-कोडिंग से बचने के लिए तत्व का id तत्व का एक से अधिक स्थानों पर होना।
इसके अलावा, आप jQuery फ़ंक्शन कॉल को चेन कर सकते हैं। जबसे attr() यह संशोधित वस्तु (ए) को लौटाता है $(this)), आप चेन कर सकते हैं .fadeIn() उसी तत्व में फीका करने के लिए।
$("#picViewer").fadeOut("slow", function() {
$(this).attr("src","myImage.jpg").fadeIn("slow");
});
प्रभाव में, कम कोड।
जवाब के लिए 0 № 3
प्रयत्न:
$("#picViewer").fadeOut("slow", function(){
document.getElementById("picViewer").src = "myImage.jpg";
$("#picViewer").fadeIn("slow");
});
जवाब के लिए 0 № 4
एनिमेशन एसिंक्रोनस रूप से होते हैं, इसलिए आप जो करना चाहते हैं वह एनीमेशन विधि के कॉलबैक का उपयोग करना है:
$("#picViewer").fadeOut("slow", function () {
//change image src
//fadeIn
...
यदि फीका रंग से आपका मतलब सीएसएस रंगों से है, तो जब तक आप CSS3 संक्रमण का उपयोग नहीं कर रहे हैं, तब तक आपको रंग बदलने के लिए jQuery UI (या कुछ अन्य प्लगइन) का उपयोग करना होगा।