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 回答