jQuery callback in .hover callback

Question

I am trying to remove an appended element after I have hidden the element on mouse out. What have I done wrong with the callback in the .hover callback?

// START OF $(document).ready(function() {

$(document).ready(function ()

$('.custom-right-boxes a').hover(function () {
    $(this).append('<div class="click-here"><b>Click</b><span>Here</span></div>');
    $('.click-here').stop().animate({
        width: '88px',
        height: '58px',
        marginLeft: '-44px',
        marginTop: '-40px'
    }, {
        duration: 300
    });
}, function () {
    $('.click-here').stop().animate({
        width: '0px',
        height: '0px',
        marginLeft: '-0px',
        marginTop: '-0px'
    }, {
        duration: 300
    }),

    function () {
        $('.click-here').remove();
    };
});


// END OF $(document).ready(function() {

});

Include what is not working. What is working etc. Help the community to help you. — Sarath
– Sarath, Commented Nov 1, 2012 at 19:18
What I mean is that the animationall works, but the $('.click-here').remove(); bit doesn't. Have I got it in the wrong place? I want it to be removed AFTER the animate to make all values 0px finishes. Thanks — rigid.design
– rigid.design, Commented Nov 1, 2012 at 20:05

rigid.design · Accepted Answer · 2012-11-02 07:15:46Z

Cracked it guys! Thanks for everyone that helped. Basically the bit Nelson told me was crucial so thanks for that, I also had to change:-

,{ duration: 300 }

simply to:-

,300

And then the callback worked :-) This was the final code (before I made additional changes):-

// START OF $(document).ready(function() {

$(document).ready(function () {

$('.custom-right-boxes a').hover(function () {
    $(this).append('<div class="click-here"><b>Click</b><span>Here</span></div>');
    $('.click-here').stop().animate({
        width: '88px',
        height: '58px',
        marginLeft: '-44px',
        marginTop: '-40px'
    }, 300);

}, function () {
    $('.click-here').stop().animate({
        width: '0px',
        height: '0px',
        marginLeft: '-0px',
        marginTop: '-0px'
    }, 300, function () {
        $('.click-here').remove();
    });

});

// END OF $(document).ready(function() {
});

Jonathan Leffler · Accepted Answer · 2012-11-01 19:24:58Z

0

In your code fix these:

}, {
        duration: 300
    }),  //--> REMOVE THIS parens

    function () {
        $('.click-here').remove();
    };  //ADD A PARENS HERE, like });

As you were incorrectly passing the third parameter to animate() , which is the callback function. Made above noted changes and try it.

This would be the corrected version:

// START OF $(document).ready(function() {

$(document).ready(function (){

$('.custom-right-boxes a').hover(function () {
    $(this).append('<div class="click-here"><b>Click</b><span>Here</span></div>');
    $('.click-here').stop().animate({
        width: '88px',
        height: '58px',
        marginLeft: '-44px',
        marginTop: '-40px'
    }, {
        duration: 300
    });
}, function () {
    $('.click-here').stop().animate({
        width: '0px',
        height: '0px',
        marginLeft: '-0px',
        marginTop: '-0px'
    }, {
        duration: 300
    },

    function () {
        $('.click-here').remove();
    });
});


// END OF $(document).ready(function() {

});

edited Nov 1, 2012 at 19:24

Jonathan Leffler

759k145 gold badges961 silver badges1.3k bronze badges

answered Nov 1, 2012 at 19:01

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

1 Comment

rigid.design Over a year ago

It doesn't make a difference. The animate works fine as before but the di isn't being removed afterwards :-(

Collectives™ on Stack Overflow

jQuery callback in .hover callback

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related