Question

我想让我的淡入/淡出比现在更流畅＆gt; JSFIDDLE

目前，当褪色图像时，它非常清晰（因为它似乎在第二张图像开始之前首先淡出第一张图像）。

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>

任何帮助都会很棒！谢谢！

Answer 1

通常，当发生交叉淡入淡出时，它会发生在多个元素之间。从您的示例中，您尝试在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();
}

Answer 2

这样更好吗？ Fiddle

我将慢fadeIn添加到fadeOut动画的回调函数中。这对我来说似乎更顺畅。如果这不是你想要的，你必须更具描述性。

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

jQuery交叉淡化2图像与缩略图单击

2 个答案: