Question

I have the following function I have written which is partially working. The mouse enter on hover animation is not working however the mouse leave animation is. As far as I can tell from the documentation it is written correctly but I can’t see what’s wrong. Any ideas? 🙂

function hoveranim (){

        $(this).hover(function() {

             $(this).animate({left: '+=260px'}, '6000');

        },

        function() {

            $(this).animate({left: '-=260px'}, '6000');

             }
         )};

        $('div#feedback-form-container').on('hover', hoveranim);

Answer 1

You are calling your function on the hover event. That means that once the hoveranim() function is coming into effect, the hover event has already passed, meaning it will not work, while mouseout will.

I suggest you rewrite it to a function that extends jQuery (which also allows for chaining, might come in handy)

jQuery.fn.hoveranim = function () {
    $(this).hover(function() {
         $(this).animate({left: '+=260px'}, '6000');

    },
    function() {
        $(this).animate({left: '-=260px'}, '6000');
         }
     )};

Then bind to it like this, in the document ready event (‘$(document).ready)

$('div#feedback-form-container').hoveranim();

See this Fiddle for a demo.

PS: note that when you animate the element to move, you automatically trigger the mouseout event as you are moving the element away from beneath the cursor. See my fiddle for that (potentially unwanted) effect.

To circumvent that, I would suggest introducing a second element, which will remain static, preferably is invisible (though it should still be a block element) and is positioned above the element to be moved. Then rewriting the function to accept an optional elem parameter, specifying the element which is to be moved when this element is hovered.

I have worked this out in another Fiddle (and here it is with an invisible hover_check)