Jak dodać efekt przejścia lub efektu przejścia obrazu za pomocą JQuery?

Question

Mam tylko jeden element <img> na mojej stronie. Zmieniam atrybut src tego obrazu co 7 sekund.

Widzę nowe obrazy co 7 sekund, ale byłoby ładniej, gdybym mógł dodać efekt zanikania lub przejścia podczas ładowania nowego obrazu.

Czy niektórzy mają prosty skrypt do tego?

Nie potrzebuję żadnej wtyczki. Potrzebuję tylko wskazówki lub kilku linii próbki do zrobienia tego.

Answer 1

Wbrew temu, co wspomniano KaiQing, można skorzystać z możliwości wywołania zwrotne jQuery do pojawiania się/zanikania obrazu podczas jesteś zmieniając go. Można to zrobić tak: http://www.jsfiddle.net/bradchristie/HsKpq/1/

$('img').fadeOut('slow',function(){ 
    $(this).attr('src','/path/to/new_image.png').fadeIn('slow'); 
}); 

Answer 2

Nie można tego zrobić z jednym obrazem.

to sprawdzić:

<div id="main_over"></div> 
    <div id="main_img"></div> 
    <div id="himg" style="display:none; clear:both; margin-top:40px;"> 

      <img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" /> 

      <img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" /> 

      <img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" /> 

      <img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" /> 

    </div> 
<style> 
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var i = 0; 
    $('#himg img').each(function(){ 
     if(i == 0) 
     { 
      $('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />'); 

     } 
     if(i == 1) 
     { 
      $('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />'); 
     } 
     i ++; 

     slide.arr.push($(this).attr('src')); 
    }); 

    setTimeout(function(){ 
     if(slide.arr.length < 2) 
      slide.fade(0); 
     else 
      slide.fade(2); 
    }, 3000); 
}); 

var slide = { 
    arr: Array(), 
    fade: function(i) 
    { 
     $('#main_over').fadeOut("medium"); 
     setTimeout(function(){slide.next(i);}, 1000); 
    }, 
    next: function(i) 
    { 
     $('#main_over').html($('#main_img').html()); 
     $('#main_over').css('display', 'block'); 

     $('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />'); 

     i++; 
     if(i >= slide.arr.length) 
      i = 0; 

     setTimeout(function(){slide.fade(i);}, 3000); 
    } 
} 

</script> 

Answer 3

będziemy chcieli wykorzystać dwa obrazy:

<img id="backImg" /> 
<img id="frontImg" /> 

Ustaw #backImg się za #frontImg tak:

#backImg 
{ 
    position: absolute; 
} 

Następnie w twój kod odpalany co 7 sekund, fadeOut przedni obraz ... to automatycznie zrobi twój efekt crossfade, ponieważ obraz z tyłu jest już załadowany za nim. Gdy blaknięcie odbywa ustaw źródło przedniego obrazek, aby src odwrocie obrazka, pokazać ją i wstępnie załadować następny obraz do tyłu obrazu:

function transitionImages(preloadImgUrl) 
{ 
    $("#frontImg").fadeOut("slow", function() 
    { 
     $("#frontImg").attr("src", $("#backImg").attr("src")).show(); 
     $("#backImg").attr("src", preloadImgUrl); 
    } 
} 

Wszystko to zakłada się, że obrazy są identycznie wielkości. Jeśli nie, będziesz chciał być nieco bardziej rozbudowany za pomocą css i zawijać obrazy w divy, które zanikają.