JQuery mouseover event events

Hello

I am currently working on a project where I am using jQuery to animate a block of text with the mouse. The event listener sits on the containing div (as shown in the code below) and works very well as long as the mouse is not over the title (.views-field-title), which is absolutely above the containing div. Does the animation start jumping almost as if it starts? 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 under construction as jQuery is only found on the above link.

I am open to all suggestions.