javascript - jQuery在鼠标悬停在容器上进行动画处理

我有以下代码片段:

<div class="bubblewrap">
    <div class="bubblebar">
        This is the popup bar
    </div>
    <div class="bubble">
        This is a bubble<br/>
        See?
    </div>
</div>

js

$(".bubblewrap").mouseenter(function(){
    $(this).find(".bubblebar").animate({top: 0px}, slow);
}).mouseleave(function(){
    $(this).find(".bubblebar").animate({top: 12px}, slow);
});

http://jsfiddle.net/8g52G/

我正在尝试将其放在任何.bubblewrap的鼠标上，它将.bubblebar移入其中。但是，它似乎没有触发事件(测试了简单的警报)。我一定做错了方法，有人可以帮我吗？

最佳答案

您忘记在小提琴中添加jQuery，而没有引用一些应作为字符串传递的值

$(".bubblewrap").mouseenter(function(){
    $(this).find(".bubblebar").animate({top: '0px'}, 'slow');
}).mouseleave(function(){
    $(this).find(".bubblebar").animate({top: '12px'}, 'slow');
});

FIDDLE

作为旁注，你也可以做

$(".bubblewrap").on('mouseenter mouseleave', function(e){
    $(this).find(".bubblebar").animate({top: e.type=='mouseenter'?0:12}, 'slow');
});