jQuery的淡入淡出2個圖像與縮略圖點擊

我試圖讓我的fadeing /出更平滑比它目前的位置>JSFIDDLE jQuery的淡入淡出2個圖像與縮略圖點擊

目前，它是非常尖銳的（因爲它似乎首先淡出第一圖像出在第二次開始之前）時衰落圖像。

的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個元素之間交叉淡入淡出。

看看下面的小提琴，它可能指向你一個好方向。

$('#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

我將慢fadeIn添加到fadeOut動畫的回調函數中。這對我來說似乎更順利。如果這不是你想要的，你必須要更具描述性。

$('#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個圖像與縮略圖點擊

回答

相關問題