CODEWITHSUNDEEP
jquery
JayDee
JayDee

Reputation: 1643

Add a DIV below hovered image with jQuery

I currently have a mouseover/mouseout event - I want to show a div after the animation is complete on mouseover, and hide the div before the animation begins on mouseout.

I can't get it to display relative to the div shown after animation, or queue it correctly.

http://jsfiddle.net/q2Fh7/

Upvotes: 0

Views: 205

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to use the callback function parameters of animate() to append the message div to the relevant box. You should also use hover for this. Try this:

$('.box').hover(
    function() {
        var $box = $(this);
        $box.stop().animate(
            { width: '280px', height: '420px'},
            650,
            function() {
                var $div = $("<div></div>").addClass("message").text("Message text");
                $box.append($div);
                $div.fadeIn();
            }
        );
    },
    function() {
        var $box = $(this);
        $(".message", $box).fadeOut(function() {
            $box.stop().animate({ width: '100px', height: '100px' }, 650);
        });        
    }
);

Example fiddle

Upvotes: 1

ninja
ninja

Reputation: 2263

I assume this is not exactly what you want. But I figure it will get you on the right path: http://jsfiddle.net/r6xbp/

Edit: optimized http://jsfiddle.net/r6xbp/2/

Upvotes: 0

Related Questions