jQuery नई छवि के लिए फीका

Question

मैं एक छवि को jquery के साथ दूसरे में कैसे फीका सकता हूं? जहां तक ​​मैं कह सकता हूं कि आप fadeOut का उपयोग करेंगे, स्रोत को attr() के साथ बदलें और फिर fadeIn फिर से करें। लेकिन यह क्रम में काम नहीं कर रहा है। मैं प्लगइन का उपयोग नहीं करना चाहता क्योंकि मैं काफी बदलाव जोड़ने की उम्मीद करता हूं।

धन्यवाद।

Answer 1

सामान्य स्थिति में, आप fadeOut() को फोन पर एक कॉलबैक का उपयोग करना होगा।

पृष्ठ पर पहले से ही एक ऐसे छवि टैग मान लिया जाये:

<img id="image" src="http://sstatic.net/so/img/logo.png" /> 

आप fadeOut() को कॉलबैक तर्क के रूप में एक समारोह पारित कि src विशेषता को रीसेट करता है और उसके बाद fadeIn() का उपयोग कर वापस fades:

$("#image").fadeOut(function() { 
    $(this).load(function() { $(this).fadeIn(); }); 
    $(this).attr("src", "http://sstatic.net/su/img/logo.png"); 
}); 

के लिए jQuery में एनिमेशन, एनीमेशन पूर्ण होने के बाद कॉलबैक निष्पादित किए जाते हैं। यह आपको अनुक्रमिक रूप से चेन एनिमेशन की क्षमता देता है। load() पर कॉल पर ध्यान दें। यह सुनिश्चित करता है कि छवि को वापस लुप्त होने से पहले लोड किया गया है (वाई। शोहम के लिए धन्यवाद)।

Here's a working example

Answer 2

क्या आप सुनिश्चित हैं कि आप callback का उपयोग कर रहे हैं, तो आप fadeOut में स्रोत एटआर बदलने के लिए और फिर fadeIn पर कॉल कर रहे हैं? आप अनुक्रमिक रूप से fadeOut, attr() और fadeIn पर कॉल नहीं कर सकते हैं। fadeOut को पूरा करने के लिए आप इंतज़ार करना होगा ...

Answer 3

ठीक है, आप मौजूदा एक के पीछे अगली छवि जगह कर सकते हैं, और fadeOut मौजूदा ताकि वह इस प्रकार है जैसे कि यह अगले छवि में fading है लग रहा है।

जब लुप्त हो जाता है, तो आप छवियों को वापस ले जाते हैं। तो मोटे तौर पर:

<style type="text/css"> 

.swappers{ 
    position:absolute; 
    width:500px; 
    height:500px; 
} 

#currentimg{ 
    z-index:999; 
} 

</style> 

<div> 
    <img src="" alt="" id="currentimg" class="swappers"> 
    <img src="" alt="" id="nextimg" class="swappers"> 
</div> 

<script type="text/javascript"> 
    function swap(newimg){ 
     $('#nextimg').attr('src',newimg); 
     $('#currentimg').fadeOut(
      'normal', 
      function(){ 
       $(this).attr('src', $('#nextimg').attr('src')).fadeIn(); 
      } 
     ); 
    } 
</script> 

Answer 4

$("#main_image").fadeOut("slow",function(){ 
    $("#main_image").load(function() { //avoiding blinking, wait until loaded 
     $("#main_image").fadeIn(); 
    }); 
    $("#main_image").attr("src","..."); 
}); 

Answer 5

जो लोग छवि चौड़ाई प्रतिशत (जो आपके ब्राउज़र चौड़ाई के अनुसार स्केल) के अनुसार पैमाने पर करने के लिए, स्पष्ट रूप से आप नहीं पिक्सेल में ऊंचाई और चौड़ाई सेट करना चाहते हैं सीएसएस में

यह सबसे अच्छा तरीका नहीं है, लेकिन मैं किसी भी जेएस प्लगइन का उपयोग नहीं करना चाहता हूं।

तो आप क्या कर सकते हैं:

1. एक ही आकार पारदर्शी PNG बनाएँ और एक आईडी इसे करने के लिए के रूप में दूसरी बैनर के रूप में प्रथम बैनर
2. नाम अपनी मूल छवि डाल
3. दोनों को एक डीआईवी

यहां आपके लिए सीएसएस संरचना है आर संदर्भ:

.design-banner { 
    position: relative; 
    width: 100%; 
    #first-banner { 
     position: absolute; 
     width: 100%; 
    } 
    #second-banner { 
     position: relative; 
     width: 100%; 
    } 
} 

उसके बाद, आप सुरक्षित रूप से बाहर अपने मूल बैनर सामग्री है जो अपनी छवि चलती है और नीचे

अप निमिष और बाद रखा बिना फीका कर सकते हैं

Answer 6

पुराना सवाल लेकिन मैंने सोचा कि मैं एक जवाब में फेंक चाहते हैं । मैं इसे होमपेज पर बड़ी हेडर छवि के लिए उपयोग करता हूं। वर्तमान और अगली छवियों के लिए जेड-इंडेक्स में हेरफेर करके अच्छी तरह से काम करता है, अगली छवि को वर्तमान के नीचे दिखाता है, फिर वर्तमान में बाहर निकलता है।

सीएसएस:

#jumbo-image-wrapper 
{ 
    width: 100%; 
    height: 650px; 
    position: relative; 
} 

.jumbo-image 
{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

HTML:

<div id="jumbo-image-wrapper"> 
    <div class="jumbo-image" style="background-image: url('img/your-image.jpg');"> 
    </div> 
    <div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;"> 
    </div> 
</div> 

जावास्क्रिप्ट (jQuery):

function jumboScroll() 
{ 
    var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length; 

    var next_index = jumbo_index+1; 
    if (next_index == num_images) 
    { 
     next_index = 0; 
    } 

    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10"); 
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9"); 
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show(); 
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow"); 

    jumbo_index = next_index; 

    setTimeout(function(){ 
     jumboScroll(); 
    }, 7000); 
} 

यह कोई मैट काम करेंगे कक्षा के साथ कितने "स्लाइड" हैं। जंबो-छवि # जंबो-छवि-रैपर div में हैं।