0

I had the 1st half working great. When I tried to add a .mouseleave in the completion function it just froze the whole thing up. can anyone see where I've messed up?

$(document).ready(function() {
    $('#TwitterBox').mouseenter(function(event) {
        $(this).animate({
            top: 0
        }, {
            duration: 'slow',
            easing: 'easeOutBack',
            complete: function() {
                $('#TwitterBox').mouseleave(function(event) {
                    $(this).animate({
                        top: 550
                    }, {
                        duration: 'slow',
                        easing: 'easeOutBack'
                    });
                });
            }
        });

    });
});​

here is the CSS

#TwitterWrap{
    background-color: #999;
    height: 500px;
    width: 300px;
    overflow: hidden;
    position: absolute;
    right: 25px;
    bottom: 25px;
}
#TwitterBox{
    background-color: #0FC;
    height: 400px;
    width: 300px;
    position: relative;
    top: 450px;
}

Essentially just trying to slide a div up on .mouseenter and back down on .mouseleave

3
  • Why are you nesting events like that? Doesn't seem right...
    – elclanrs
    Mar 30, 2012 at 5:47
  • That's just it I don' think it is. I was getting cofused with braces. The result I have now is what JSlint told me was valid.
    – Greg
    Mar 30, 2012 at 5:49
  • I figured it out. Will post tomorrow when they allow me answer my own question
    – Greg
    Mar 30, 2012 at 6:05

2 Answers 2

0

I dont understand animation. This may help

$(document).ready(function() {
    $('#TwitterBox').mouseenter(function(event) {
        $(this).animate({
            top: 0
        }, {
            duration: 'slow',
            easing: 'easeOutBack'
        }
        ).mouseleave(function(event) {
                $(this).animate({
                    top: 300
                }, {
                    duration: 'slow',
                    easing: 'easeOutBack'
                });
            });
    });​
});

And click here for DEMO

-1
I figured it out
 $(document).ready(function() {
$('#TwitterBox').mouseenter(function() {
    $(this)
        .animate(
            { top: 50 }, {
                duration: 'slow',
                easing: 'easeOutBack',
                complete: (function() {
$('#TwitterWrap').mouseleave(function() {
    $('#TwitterBox')
        .animate(
            { top: 425 }, {
                duration: 'slow',
                easing: 'easeOutBack',
            })
    });
    })
       })

});

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.