2

フェードイン/フェードアウトを現在よりもスムーズにしようとしています> JSFIDDLE

現在、画像をフェードするときは非常にシャープです（最初の画像が最初にフェードアウトしてから、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>

どんな助けでも素晴らしいでしょう！ありがとう！

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のコールバック関数にslowを追加しました。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 に答える