在悬停时向上滑动元素

时间:2012-07-17 17:47:22

标签: jquery

查看http://www.shopvcf.com/blog/?page_id=56

我需要用红色心脏区域向上滑动,这是我用这段代码完成的。

$(document).ready(function () {
    $('div.bottomwrap').on({
        'mouseenter': function () {
            $(this).animate({
                bottom: 20
            });
        },
        'mouseleave': function () {
            $(this).animate({
                bottom: 0
            });
        }
    });
});

问题是我希望它在进入包含内容的方框时向上滑动,而不仅仅是底部包裹。

我还想隐藏同时在后台显示图像的内容。

任何帮助都会很棒。谢谢!

1 个答案:

答案 0 :(得分:0)

您要做的一件事是将动画队列设置为false并设置持续时间。否则,如果用户快速地在屏幕上来回盘旋,则每件事物都会继续移动。

查看http://api.jquery.com/animate/了解更多详情,但看起来如此:

至于你的问题。我首先要更改所有集合“jpgoverlay”的 id - 将其设置为类名 - 如果是选项。然后下面的代码应该做的伎俩。拥有一个具有非唯一名称的ID可能会让您以后感到痛苦。

$(document).ready (function () {
    $('div.jpgoverlay').on({
         'mouseenter': function() {
         $(this).animate({ bottom: 20 },{queue:false,duration:400});
    },
     'mouseleave': function() {
         $(this).animate({ bottom: 0 },{queue:false,duration:400});
     }
    });
});