धीरे धीरे बदल/फीका/एक छवि JQuery

Question

के साथ बदल चेतन यह मेरा img है, <img src="one.png" id="one" onMouseOver="animateThis(this)">

मैं धीरे धीरे इस छवि src करने के लिए "oneHovered.png" बदलने के लिए उपयोगकर्ता jQuery का उपयोग कर पर घूमता जब चाहते हैं। यह करने के लिए कौन सी jQuery विधि सबसे अच्छी है? मुझे लगता है कि कई उदाहरण मुझे सीएसएस पृष्ठभूमि बदलना चाहते हैं। क्या स्रोत विशेषता को सीधे बदलने के लिए कुछ भी है?

Answer 1

आप पहले वैकल्पिक पैरामीटर का उपयोग करके फेडआउट की अवधि को नियंत्रित करने, छवि को पहले लुप्त करके शुरू कर सकते हैं। फीका आउट पूरा होने के बाद, अनाम कॉलबैक आग लगेगा, और छवि का स्रोत नए के साथ बदल दिया जाएगा।

मूल HTML::

<img src="one.png" id="one" /> 

जावास्क्रिप्ट: बहुत आसान

$('#one').hover(function() { 

    // increase the 500 to larger values to lengthen the duration of the fadeout 
     // and/or fadein 
    $('#one').fadeOut(500, function() { 
     $('#one').attr("src","/newImage.png"); 
     $('#one').fadeIn(500); 
    }); 

}); 

अंत में, jQuery का उपयोग कर, यह बहुत, है करने के लिए बाद में, हम एक और अवधि मान, मिलीसेकंड में मापा का उपयोग कर छवि में फीका एचटीएमएल पर किसी भी जावास्क्रिप्ट विशेषताओं का उपयोग किए बिना, जावास्क्रिप्ट घटनाओं को गतिशील रूप से बाध्य करें। मैंने मूल img टैग को संशोधित किया ताकि इसमें src और id विशेषताएँ हों।

jQuery hover घटना यह सुनिश्चित करेगी कि जब उपयोगकर्ता माउस के साथ छवि पर होवर करता है तो कार्य ठीक हो जाता है।

अधिक पढ़ने के लिए, jQuery fadeOut और jQuery fadeIn भी देखें।

छवि लोड समय के साथ संभावित समस्याओं:

यदि यह पहली बार कोई उपयोगकर्ता किसी छवि पर होवर किया गया है और इसके लिए एक अनुरोध करने, वास्तविक fadein में मामूली गड़बड़ हो सकता है है, के बाद से वहाँ होगा newImage.png का अनुरोध करते समय सर्वर से विलंबता हो। इसके लिए एक वर्कअराउंड इस छवि को प्रीलोड करना है। StackOverflow on preloading images पर कई संसाधन हैं।

Answer 2

@ jmort253 के अतिरिक्त, यह अच्छा होगा अगर आप min-height को बाहर निकलने से पहले जोड़ दें। अन्यथा आप उत्तरदायी छवियों के लिए विशेष रूप से एक झटकेदार देख सकते हैं।

मेरे सुझाव होगा जब jQuery के माध्यम से छवि स्रोत बदलते

$('#one').hover(function() { 
    // add this line to set a minimum height to avoid jerking 
    $('#one').css('min-height', $('#one').height()); 
    // increase the 500 to larger values to lengthen the duration of the fadeout 
     // and/or fadein 
    $('#one').fadeOut(500, function() { 
     $('#one').attr("src","/newImage.png"); 
     $('#one').fadeIn(500); 
    }); 

}); 

Answer 3

इस

<img class="product-images-cover" src="~/data/images/productcover.jpg" /> 
<div class="list-images-product"> 
<div> 
    <img class="thumbnail" src="~/data/images/product1.jpg" /> 
</div> 
<div> 
    <img class="thumbnail" src="~/data/images/product2.jpg" /> 
</div> 
</div> 

$(document).ready(function() { 
    $(".list-images-product .thumbnail").click(function (e) { 
     e.preventDefault(); 
     $(".product-images-cover").fadeOut(250).attr("src", $(this).attr('src')).fadeIn(250); 
    }); 
}); 

Answer 4

कोशिश, यह एक लोडिंग समय है, जो कुछ झिलमिलाते प्रभाव में परिणाम है लेता है। मैंने इस मुद्दे को हल करने के लिए उपरोक्त कोड को संशोधित किया।

$(".list-images-product .thumbnail").fadeTo(1000,0.30, function() { 
    $(".list-images-product .thumbnail").attr("src",newsrc); 
    $(".list-images-product .thumbnail").on('load', function(){ 
    $(".list-images-product .thumbnail").fadeTo(500,1); 
    }); 
});