Question

我上半场工作得很好。当我试图在完成功能中添加.mouseleave时，它只是冻结了整个事情。谁能看到我搞砸了哪里？

$(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'
                    });
                });
            }
        });

    });
});

这是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;
}

基本上只是试图在.mouseenter上滑动一个div然后再回到.mouseleave

Answer 1

我不懂动画。这可能会有所帮助

$(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'
                });
            });
    });
});

点击此处查看 DEMO

Answer 2

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',
            })
    });
    })
       })

});

}）;

Jquery Animate由于某种原因无法工作

2 个答案: