CODEWITHSUNDEEP
javascriptjqueryjquery-uimouseoverjquery-animate
Shaun
Shaun

Reputation: 1109

Jquery mouseover event issues

Hi

I am currently working on a project where I am using jQuery to animate a block of text on mouse over. The event listener is on the containing div (as shown by the code below) and works really well until the mouse is over the title (.views-field-title) which is absolutely above the containing div. The animation begins to jump almost as though it is starting over? What am I doing wrong?

$('#interior_design .views-row').mouseover(function(){
    $('.views-field-title', this).stop(true, true).animate(
        { height: '+=10px' },
        { duration: 'fast'});
    });

$('#interior_design .views-row').mouseout(function(){
    $('.views-field-title', this).stop(true, true).animate(
        { height: '-=10px' },
        { duration: 'fast'});
    });

Link to dev server: http://viva.bangtest.co.uk/interior-design

Note: this site is still in development as such the jQuery is only on the above linked page currently.

I'm open to all suggestions.

Upvotes: 2

Views: 293

Answers (1)

jAndy
jAndy

Reputation: 236202

That event fires every time you move the mouse. You should use mouseenter and mouseleave instead.

Upvotes: 3

Related Questions