0

JavaScriptはかなり新しく、jQueryは非常に新しいものです。誰かが次のコードを見て、私がどこで間違っているのかを知ることができますか？

これはjQueryコードの主要部分です。

$(document).on("hover", ".crrightcontainer img", function() { /* trigger event on hover on an img in class crrightcontainer */
    var src = $(this).attr('src'); // get full path and filename from thumbnail
    var index = src.lastIndexOf('/') + 1; // get index to last occurrenace of file path delimiter "/"
    var fullsizeimgname = src.substr(index); // get actual filename only i.e. "cs1.jpg"
    fullsizeimgname = "/painted/fp-images/" + fullsizeimgname; // add path to give full path to the full sized image.
    $('.crleftcontainer img').animate({opacity: 0.0},1000); // fade out old full size image
    $('.crleftcontainer img').attr("src",fullsizeimgname).animate({opacity: 1.0},1000); // set full size image in browser and fade in
 });

http://jsfiddle.net/deanflyer/CfxyJ/1

それは機能し、複数のマウスイベントを発生させるようです。サムネイル画像の上でマウスを数回動かすだけで、私が何を意味するのかがわかり、複数のフェードが表示されます。

メイン画像でanimate（）を使用して.stop（）を使用してみましたが、これですべてが停止します。

どうもありがとう。

4

2 に答える 2

1

このようなものがあなたの要件はこれを試してみてください：http：//jsfiddle.net/CfxyJ/13/

    $('.crrightcontainer img').css('opacity', 0.7); 

$('.crrightcontainer img').mouseenter(function () { 
    $(this).stop().animate({opacity: 1.0}, 600);
    var src = $(this).attr('src'); 
    var index = src.lastIndexOf('/') + 1; 
    var fullsizeimgname = src.substr(index);
    fullsizeimgname = "http://thepaintedtree.co.uk/fp-images/" + fullsizeimgname;  
    $('.crleftcontainer img').fadeOut('slow', function(){
        $('.crleftcontainer img').attr("src", fullsizeimgname).fadeIn('slow');
    });
});

$('.crrightcontainer img').mouseleave(function () { //fadeout
    $(this).stop().animate({
        opacity: 0.7
    }, 600);

});
于 2013-01-18T19:27:08.310 に答える
0

mouseenterイベントを使ってみてください。更新されたフィドルhttp://jsfiddle.net/CfxyJ/25/を参照してください。それはあなたが探しているものですか？

于 2013-01-18T19:11:04.740 に答える