I am receiving this Uncaught TypeError on a new website I am creating, but I can't work out what is causing the error.

I have recreated the issue at the link below, if you take a look at your browsers JS console you'll see the error occurring, but nothing else happens.

/

Code:

$('.newsitem').hover(
$(this).children('.text').animate({ height: '34px' }), 
$(this).children('.text').animate({ height: '0px'  }));​

I am receiving this Uncaught TypeError on a new website I am creating, but I can't work out what is causing the error.

I have recreated the issue at the link below, if you take a look at your browsers JS console you'll see the error occurring, but nothing else happens.

http://jsfiddle/EbR6D/2/

Code:

$('.newsitem').hover(
$(this).children('.text').animate({ height: '34px' }), 
$(this).children('.text').animate({ height: '0px'  }));​

• javascript
• jquery

• Where is .text in the HTML? – gdoron Commented Jun 14, 2012 at 12:04
• sorry, that should have read .title – David Pooley Commented Jun 14, 2012 at 12:17

4 Answers 4

Be sure to wrap those in asynchronous callbacks:

$('.newsitem').hover(
    function() {
        $(this).children('.title').animate({height:'34px'});
    }, function() {
        $(this).children('.title').animate({height:'0px'});
    }
);
​

You need:

.hover(function(){ ... });

as per the documentation.

You're missing the function...

$('.newsitem').hover(
    $(this).children('.text').animate({height:'34px'}),
    $(this).children('.text').animate({height:'0px'})
);

To:

$('.newsitem').hover(function() {
    $(this).children('.text').animate({
        height: '34px'
    });
}, function() {
    $(this).children('.text').animate({
        height: '0px'
    });
});​
​

And the ​$(this).children('.text'), is not selecting anything.

use slide animation to handle hight of the .text class.

$('.newsitem').hover(function() {
    $(this).children('.text').slideToggle();
});​
​