0

私はこれに対する答えを得るのに苦労しています...私は一連のサムネイルを持っています、そしてそれらをロールオーバーするとき、私はメイン画像（別のdiv内）をロールオンされたサムネイルの画像に変更したいと思います。私はプログラミングに不慣れですが、次のコードで得られる基本的な機能には満足しています。

$(document).ready(function() {
    var originalimg = $('.mainImage').attr('src');
    $(".subImage").hover(function() {
        var currentimg = $(this).attr('src');
        $('.mainImage').attr('src', currentimg);
    }, function() {
        $('.mainImage').attr('src', originalimg);
    });
});​

理想的には、フェードイン/フェードアウト効果を追加することです。これを達成するためのはるかに良い方法があると確信していますが、誰かが上記のコードを変更してフェードを含めることができれば、本当にありがたいです。皆さんありがとう！

4

2 に答える 2

0

連鎖して、使用fadeOut()してfadeIn()

var originalimg = $('.mainImage').attr('src');
$(".subImage").hover(function() {
    var currentimg = $(this).attr('src');
    $('.mainImage')
        .stop()
        .fadeOut()
        .attr('src', currentimg)
        .fadeIn();
}, function() {
    $('.mainImage')
        .stop()
        .fadeOut()
        .attr('src', originalimg)
        .fadeIn();
});​

デモ

于 2012-05-08T17:09:41.700 に答える
0

これにより、ちらつきやキューの蓄積を防ぐことができます。

var originalimg = $('.mainImage').attr('src');
$(".subImage").hover(function() {
    var currentimg = $(this).attr('src');
    $('.mainImage').fadeOut(function() {
        $('.mainImage').attr('src', currentimg).fadeIn();
    });
}, function() {
    $('.mainImage').fadeOut(function() {
        $('.mainImage').attr('src', originalimg).fadeIn();
    })
});​

jsFiddleの例。

于 2012-05-08T17:25:43.150 に答える