jQuery를 크로스 페이드 썸네일 2 개 이미지

는 내가 현재 여기에/더 많은 부드럽게 이상에서 먼저 첫 번째 이미지를 페이드 아웃 것 같이 (JSFIDDLE jQuery를 크로스 페이드 썸네일 2 개 이미지

는 현재 매우 날카로운> 내 fadeing를 만들기 위해 노력하고 클릭 두 번째가 시작되기도 전에) 이미지가 희미 해집니다.

JS :

$(document).ready(function() { 
    $('#thumbImgs').hoverscroll({ 
     fixedArrows: true, 
     vertical : true, 
     width: 250, 
     height: 600, 
     arrows: false, 
     rtl: true, 
     thespeed: 30 
    }); 
}); 

$("#thumbImgs li").live('click', function(e) { 
    var largeImgURL = $(this).attr('id'); 

    $('#bigPic').fadeOut('fast'); 
    $('#bigPic').fadeIn('slow').html('<img src="http://www.zzzz.com/test/' + largeImgURL + '" width="1000" height="700" alt="">'); 
});

html로 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

    <title>HoverScroll Test Page</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://rascarlito.free.fr/hoverscroll/js/hoverscroll/jquery.hoverscroll.js"></script>  
</head> 
<body> 
    <h1>HoverScroll Test Page</h1> 

    <div id="theThumbs"> 
     <ul id="thumbImgs"> 
     <li id="img1.jpg"><img src="http://www.zzzz.com/test/img1_tmb.jpg" width="120" height="120" alt=""></li> 
     <li id="img2.jpg"><img src="http://www.zzzz.com/test/img2_tmb.jpg" width="120" height="120" alt=""></li> 
     <li id="img3.jpg"><img src="http://www.zzzz.com/test/img3_tmb.jpg" width="120" height="120" alt=""></li> 
     <li id="img4.jpg"><img src="http://www.zzzz.com/test/img4_tmb.jpg" width="120" height="120" alt=""></li> 
     <li id="img5.jpg"><img src="http://www.zzzz.com/test/img5_tmb.jpg" width="120" height="120" alt=""></li> 
     </ul> 
    </div> 

    <div id="bigPic"> 
     <img src="http://www.zzzz.com/test/img1.jpg" width="1000" height="700" alt=""> 
    </div> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#thumbImgs').hoverscroll({ 
      fixedArrows: true, 
      vertical : true, 
      width: 250, 
      height: 600, 
      arrows: false, 
      rtl: true, 
      thespeed: 30 
     }); 
    }); 

    $("#thumbImgs li").live('click', function(e) { 
     var largeImgURL = $(this).attr('id'); 

     $('#bigPic').fadeOut('fast'); 
     $('#bigPic').fadeIn('slow').html('<img src="http://www.zzzz.com/test/' + largeImgURL + '" width="1000" height="700" alt="">'); 
    }); 

</script> 
</body> 
</html>

어떤 도움이 좋을 것! 감사!

출처

2012-12-12 StealthRT

은 일반적으로 여러 요소간에 일어난다. 귀하의 예제에서 1 요소 사이를 교차 페이드하려고합니다.

다음 바이올린을 확인해보세요. 좋은 방향으로 가리킬 수 있습니다. http://jsfiddle.net/Nv6gp/2/

$('#thumbImgs').on('click', 'li', fade); 

var imgs = $('#imgs li'); 

function fade(e) { 
    var _self = imgs.eq($(e.currentTarget).index()); 

    imgs.fadeOut(); 
    _self.fadeIn(); 
}

출처

2012-12-12 18:06:08

이것은 내가 찾고있는 라인을 따라 더 있습니다 : http://jsfiddle.net/Nv6gp/3/ – StealthRT

흥미로운 솔루션 –

아 그래 ! 죄송합니다! 거기에 큰 이미지를 넣을 수있었습니다. 방금 그 개념이 효과가 있다고 생각했습니다. –

더 낫습니까?

Fiddle은 내가 fadeOut 애니메이션의 콜백 함수에 느린 fadeIn을 추가했습니다. 이것은 나에게 더 부드럽게 보입니다. 이것이 당신이 원하는 것이 아니라면 좀 더 설명력이 있어야합니다. 크로스 페이딩이 발생하면

$('#bigPic').fadeOut('fast', function() { 
     $('#bigPic').fadeIn('slow').html('<img src="http://www.zzzz.com/test/' + largeImgURL + '" width="1000" height="700" alt="">'); 
});

출처

2012-12-12 17:55:49

네, 그것은 더 나은하지만 난 당신이 같은로드 두 이미지가 있어야 의미 현재의 이미지가 교차 페이드 새로운 하나의 페이딩 할 수 뭔가 ... – StealthRT

을 찾고 있었다 시각. 투명한 배경을 가진 PNG가 필요합니다. 이러한 유형의 이미지로 코드를 업데이트하면 방법을 알려 드리겠습니다. –

문제는 이미지가 PNG의 것이 아니라는 것입니다. JPG의 ... – StealthRT

jQuery를 크로스 페이드 썸네일 2 개 이미지

답변

관련 문제