JQuery를 사용하여 페이드 효과 또는 이미지 전환 효과를 추가하는 방법은 무엇입니까?

Question

내 페이지에 <img> 요소가 하나만 있습니다. 이 이미지의 src 속성을 7 초마다 변경합니다.

나는 7 초마다 새로운 이미지를 본다. 그러나 새로운 이미지를로드 할 때 페이딩이나 트랜지션 효과를 추가 할 수 있다면 더 좋을 것이다.

일부 스크립트에는이 스크립트가 있습니까?

플러그인이 필요하지 않습니다. 그것을하기위한 단서가 있거나 몇 줄의 샘플이 필요합니다.

Answer 1

KaiQing 언급 무엇에도 불구하고, 당신은 당신이 그것을 변경하는 동안 인/아웃 이미지를 페이드하기 위해 jQuery를의 콜백 기능을 사용할 수 있습니다. 이것은과 같이 수행 할 수 있습니다과 같이 #frontImg 뒤에 수 #backImg을 설정

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

: http://www.jsfiddle.net/bradchristie/HsKpq/1/

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

Answer 2

하나의 이미지로는이 작업을 수행 할 수 없습니다.

에 체크를 아웃 :

<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

당신은이 개 이미지를 사용하는 것이 좋습니다

#backImg 
{ 
    position: absolute; 
} 

그런 다음에 7 초마다 발동하는 코드, fadeOut 전면 이미지 ... 이것은 백 이미지가 이미 뒤에로드되어 있기 때문에 크로스 페이드 효과를 자동으로 수행합니다. 페이드가 완료되면, 뒷면 이미지의 SRC에 전면 이미지의 소스를 설정을 보여주고, 뒷면 이미지로 다음 이미지를 사전로드 :

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

을이 모든 이미지는 동일 크기의 가정합니다. 그렇지 않다면 CSS로 좀 더 정교 해지고 페이드 아웃되는 div에서 이미지를 래핑하는 것이 좋습니다.