Question

我有以下代码片段：

<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。但是，它似乎没有触发事件（测试了一个简单的警报）。我必须以错误的方式做，有人可以帮助我吗？

Answer 1

你忘记在你的小提琴中添加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');
});

Answer 2

3件事：

jQuery不是小提琴。
12px应该是一个字符串，现在它被视为var名称。
同样适合slow。

小提琴：http://jsfiddle.net/8g52G/2/

Jquery动画鼠标悬停在容器上

2 个答案: