Question

I’m trying to handle mouseover / mouseout animations and a statement I have is not evaluating to true when you mouseover an element that you previously moused over. I’m trying to prevent a double rollover animation from happening. Here’s my code:

var $chosenThumb = null;
var $lastThumb = null;

$('.thumb_img').mouseover(function(){

    if ($chosenThumb != null){
        $lastThumb = $chosenThumb;
        $lastThumbContainer = $chosenThumb.parent();
        $lastThumbOverlay = $lastThumbContainer.children('.thumb_overlay');
    }

    $chosenThumb = $(this);

    console.log($lastThumb + "|" + $chosenThumb + "|" + ($lastThumb == $chosenThumb));

    $chosenThumbContainer = $(this).parent();
    $chosenThumbOverlay = $chosenThumbContainer.children('.thumb_overlay');

    if ($lastThumb != null && $lastThumb != $chosenThumb){
        $lastThumbOverlay.animate({ 'height' : '0px'}, 200);
        $lastThumbContainer.children('.thumb_plus').animate({'height' :'0px', 'width' : '0px' },200);
    }

    if ($lastThumb != $chosenThumb) {
        $chosenThumbOverlay.animate({ 'height' : '30px'}, 200);
        $chosenThumbContainer.children('.thumb_plus').animate({'height' :'31px', 'width' : '31px' },200);
    }
});

So the first time you mouse over a thumbnail, lastThumb will be null and chosenThumb will be the thumb you rolled over. Then the next time you mouse over that thumb, lastThumb should be equal to chosenThumb, but the log statement does not evaluate as true. Why?

Answer 1

Even with the same selector, every jQuery object is a new instance of jQuery. To compare elements, you have to compare the actual DOM element:

//$lastThumb[0] returns the first DOM element from the jQuery selector
$lastThumb[0] == $chosenThumb[0]