CODEWITHSUNDEEP
jqueryhtmlhoverjquery-animate
J A Pytlak
J A Pytlak

Reputation: 49

jQuery hover function - what am I missing?

I'm simply trying to animate some div's I have in my HTML code. I just took a summer course and now that it's over I want to keep coding and learning more, so I'm just messing around, but coming up short.

$(document).ready(function() {
    $('div').hover(function() {
        $(this).animate({height: '68px',opacity: '0.3'},'650'),
            function() {
        $(this).animate({height: '45px',opacity: '1.0'},'650');
        };
    });
});

As far as I can tell everything is set up fine, and the reason I went with hover is because 'mouseenter/leave' don't work in chrome (for whatever reason). I looked through a bunch of similar questions but couldn't find what I've been looking for.

Upvotes: 1

Views: 92

Answers (3)

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10189

jQuery's hover function is just a mixture of 2 functions!

It is a mixture of .mouseenter and .mouseleave and they are in its parameters.

So the .hover is this .hover(.mouseenter, .mouseleave).

So then you have to do it like this:

$('div').hover(function(){

    $(this).animate({height: '68px',opacity: '0.3'},'650');

} /*mouseenter */, function(){

    $(this).animate({height: '45px',opacity: '1.0'},'650');

} /*mouseleave*/);

Upvotes: 0

mohkhan
mohkhan

Reputation: 12335

I think you missed to close the first function. Here try this

$(document).ready(function() {
    $('div').hover(
        function() {
            $(this).animate({height: '68px',opacity: '0.3'},'650');
        },
        function() {
            $(this).animate({height: '45px',opacity: '1.0'},'650');
        }
    );
});

Upvotes: 1

jfriend00
jfriend00

Reputation: 708116

Your bracing is messed up. I think it should be this:

$(document).ready(function() {
    $('div').hover(function() {
        $(this).animate({height: '68px',opacity: '0.3'},'650');
    }, function() {
        $(this).animate({height: '45px',opacity: '1.0'},'650');
    });
});

FYI, if you look in your browser's error console or the debug console, it should show you syntax errors like this.

And, you probably want to add .stop(true, true) so animations don't pile up if you move the mouse quickly in and out.

$(document).ready(function() {
    $('div').hover(function() {
        $(this).stop(true, true).animate({height: '68px',opacity: '0.3'},'650');
    }, function() {
        $(this).stop(true, true).animate({height: '45px',opacity: '1.0'},'650');
    });
});

Working example: http://jsfiddle.net/jfriend00/tZEWy/

Upvotes: 4

Related Questions