2

我试图让我的淡入/淡出比现在更平滑> 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>

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

4

2 回答 2

2

通常，当交叉衰落发生时，它发生在多个元素之间。从您的示例中，您尝试在 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-12T18:06:08.023 回答
1

这是否更好？小提琴

我在动画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-12T17:55:49.070 回答