Javascript jquery image fade animate（）和多个鼠标事件

对于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
 });

它是有效的，它似乎触发了多个鼠标事件。只需在缩略图上移动鼠标几次，您就会明白我的意思，即多次淡入淡出

我已经尝试在主图像上使用.stop（）和animate（），但这会停止一切

---

非常感谢。

尝试使用

mouseenter

事件。见更新的小提琴。这是你想要的吗？

是这样的吗？你的要求是这样的试试：

---

谢谢你这么说，但现在它似乎只是渐渐消失了。我通过链接到.stop（）尝试了类似的方法，但效果与您的代码相同。@Deandurnn我已经更新了小提琴和答案

似乎您想先淡出图像

然后淡出悬停图像中的

。仍然在学习Javascript，我假设这是一个回调函数，一旦fadeout完成，就会触发fadein？只需查找jquery fadein/fadeout文档，看看它现在是如何工作的。不，仍然是相同的问题。我最初也试过mouseenter。只需尝试在两个缩略图之间移动鼠标几次，然后将鼠标从缩略图上移开。然后，您将看到排队的动画启动。请参阅更新的链接
    $('.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);

});