jQuery hover function doesn't seem to work as intended

Question

I'm having a slight problem with my script when the mouse "hover out" function should be called. What's happening is the "hover over" function gets called and a transition on an image is performed. But if you "hover out" before the transition has finished, the "hover out" function doesn't get called.

I'm quite new to JavaScript so if anyone can find a silly mistake in my script that is easily rectified to get the intended functionality, I would very much appreciate it.

$(function () {
    var easing = 'swing';

    var transitions = ['fadeToRight', 'fadeToLeft', 'fadeToTop', 'fadeToBottom'];
    var transitionSpeed = 300;

    var $product_container = $('#product_container');
    var $product_areas = $product_container.find('.product_area');
    var $product_images = $product_container.find('img');
    var imageCount = 0;

    $product_images.each(function () {
        var $this = $(this);
        $('<img/>').load(function () {
            ++imageCount;
            if (imageCount == $product_images.length) {
                $product_areas.each(function () {
                    $(this).hover(
                        function () {
                            var $currImage = $(this).find('img');

                            var transition = transitions[Math.floor(Math.random() * transitions.length)];

                            switch (transition) {
                                case 'fadeToRight':
                                    $currImage.animate(
                                        {
                                            'left': $currImage.width() + 'px',
                                            'opacity': '0'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'left': '0px',
                                                    'opacity': '1'
                                                });
                                        });
                                    break;

                                case 'fadeToLeft':
                                    $currImage.animate(
                                        {
                                            'left': -$currImage.width() + 'px',
                                            'opacity': '0'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'left': '0px',
                                                    'opacity': '1'
                                                });
                                        });
                                    break;

                                case 'fadeToTop':
                                    $currImage.animate(
                                        {
                                            'top': -$currImage.height() + 'px',
                                            'opacity': '0'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'top': '0px',
                                                    'opacity': '1'
                                                });
                                        });
                                    break;

                                case 'fadeToBottom':
                                    $currImage.animate(
                                        {
                                            'top': $currImage.height() + 'px',
                                            'opacity': '0'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'top': '0px',
                                                    'opacity': '1'
                                                });
                                        });
                                    break;

                                default:
                                    $currImage.animate(
                                        {
                                            'left': -$currImage.width() + 'px'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'left': '0px'
                                                });
                                        });
                                    break;
                            }
                        },
                        function () {
                            var $currImage = $(this).find('img');
                            $currImage.show();
                        });
                });
            }
        }).attr('src', $this.attr('src'));
    });
});

I would also like to say that the "hover out" function does get called if the transition is finished and you then move the mouse out of the container for the image. It just seems really weird that it doesn't automatically go to the other function when you are no longer hovering.

Answer 1

You can cancel all earlier animations with stop():

$currImage.stop().animate({some animation})

Here's a snippet of mine:

$("div").hover(function ()
{
    $(this).stop().animate({opacity: 1}, 400);
},
function () {
    $(this).stop().animate({opacity: 0}, 400);
});

Fiddle: http://jsfiddle.net/edGas/

Answer 2

This most likely is not an issue of your mouseout function not getting called (actually it get's called like you observed when you let the animation finish) but your animation messing up your plans. By continuing after you left the element it simply overrides the rules you declare in the mouseout function.

Add stop() in the mouseout function to stop the running animation and proceed afterwards:

      function () {
          var $currImage = $(this).find('img');
          $currImage.stop().show();
      });