Question

我有一个jQuery动画示例：http://jsfiddle.net/p7Eta/

如果鼠标根本不在容器div中，我希望全部标题弹出。我试过做类似的事情：

$("#container").mouseout(

     function() {
    //slides spans up
    $('.popup').stop().animate({
        bottom: 0 + 'px'
    });

});

但它不适用于之前的动画。实现这种效果的正确方法是什么？

编辑：我想要类似这样的内容：http://jsfiddle.net/RE3XK/但是在鼠标悬停时我想像第一个例子中那样弹出单独的跨度标题而不是全部dissapear

Answer 1

你的意思是这样的。

检查工作示例http://jsfiddle.net/p7Eta/8/

<强>更新

$("#slider div.popup").hover(
function() {

    //slides spans up
    $('span', this).animate({
        bottom: 0 + 'px'
    });
}, function() {

    //slides spans down
    $('span', this).animate({
        bottom: '-' + 200 + 'px'
    });
});

$(document).mouseover(
function(e) {
    e.stopPropagation()
    $('#slider div.popup').find(' span').animate({
        bottom: 0
    });
});

Answer 2

我的猜测是你要找this one这样的东西，对吗？我尝试它的方式唯一的问题是，你输入的元素也会向下滑动（我猜不应该这样）。

Answer 3

最后，jsFiddle合作......

我正在做一些hacky，但这是我能让它发挥作用的唯一方法。我不得不在当前悬停的元素中添加.hover类，因为没有它我的代码无法正常工作。只是不要看代码，它看起来不错！

以下是一个有效的例子：http://jsfiddle.net/p7Eta/41/

代码：

// JavaScript Document

//When div.popup is moused over moused over
$("#slider div.block").hover(

function() {

    //slides spans up
    $(this).addClass('hovered');
    $(this).find('span').stop().animate({
        bottom: '0px'
    });
}, function() {
$(this).removeClass('hovered');
    //slides spans down
    $(this).find('span').stop().animate({
        bottom: '-200px'
    });
});

$('#container').hover(function() {
    $('#slider div.block:not(.hovered) span').animate({
        bottom: '-200px'
    });
}, function() {
    $('#slider div.block span').stop().animate({
        bottom: '0px'
    });
});

Answer 4

或类似的东西......在重置之前实际上会停止动画。 http://jsfiddle.net/NDtMW/

Answer 5

请澄清您的要求。你

想让动画连续不断，所以只要它们没有被徘徊，它们就会不断运动？
希望他们在没有徘徊时处于动作状态？

BTW，您的原始脚本仅适用于IE。如果您只关注一个浏览器，请在将来说明。 IE用户可能是SO的少数。

检查鼠标是否悬停在任何物体上

5 个答案:

检查工作示例http://jsfiddle.net/p7Eta/8/