CODEWITHSUNDEEP
javascriptjqueryjquery-animatejquery-hover
Deanflyer
Deanflyer

Reputation: 13

jquery image fade animate() and multiple mouse events

Fairly new to JavaScript and very new to jQuery. Can someone have a look at the following code and see where I am going wrong.

This is the main part of the jQuery code:

$(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

It works, it just seems to fire off multiple mouse events. Just move the mouse a few times over the thumbnail images and youll see what I mean, giving multiple fades.

I've tried using .stop() on the main image with animate() but this just stops everything.

Many Thanks.

Upvotes: 0

Views: 230

Answers (2)

Varinder Singh
Varinder Singh

Reputation: 1600

Try using mouseenter event. See updated fiddle http://jsfiddle.net/CfxyJ/25/. Is it what you are looking for?

Upvotes: 0

Jai
Jai

Reputation: 74738

Is something like this your requirement try this: 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);

});

Upvotes: 1

Related Questions