Question

基本上，当将鼠标悬停在图像上时，我想略微移动图像然后再将鼠标移开，将图像返回到原始位置。我有一个代码版本可以完成这项任务但是如果用户要将鼠标从图像移动到图像最初所在的区域，则会出现一些“卡顿”效应。

          -----
          |   |
-----     |img|
|   |     |   |
|img| ==> -----
|   |     xxxxx
-----     xxxxx

在上图中，当鼠标悬停在图像上时，它会被轻推2个单位。在mouseout上，图像返回到原始位置。我的代码如下所示，但是当鼠标移动到之前腾出的区域（例如，x）时，代码认为它再次悬停在图像上，然后将图像移回2个单位。当鼠标悬停在上面标有x的区域上时，这会产生一种卡顿效应。

我尝试了不同的方法（例如，使用animate（），添加/删除包装器div，使用setTimeout（）等）但它们都产生相同的不良效果。我认为不断监视页面上的鼠标位置并记住图像的位置，但这似乎过多，特别是因为可能存在1到n个图像之间的任何位置。

$(document).ready(function() {
    $('.hoverImage').hover(
        function(){
            $(this).offset({'top':$(this).offset().top-2});
        },
        function(){
            $(this).offset({'top':$(this).offset().top+2});
        }
    );
});

这是一个演示问题的jsfiddle：http://jsfiddle.net/Ut8eK/

任何提示都会非常感激。提前谢谢！

更新

真棒。我最终使用了两个答案：

$(document).ready(function() {
    $('.hoverImage').wrap('<div class="hoverImageWrapper" style="display: inline-block;">');
    $('.hoverImageWrapper').hover(
        function(){
            $('.hoverImage',this).offset({'top':$(this).offset().top-10});
        },
        function(){
            $('.hoverImage',this).offset({'top':$(this).offset().top});
        }
    );
});

以上是上述内容：http://jsfiddle.net/rf5mE/

这非常适合我的需求，因为只需将class="hoverImage"添加到适当的图像中，就可以非常轻松地添加功能。

我接受@Matyas作为答案只是因为他的答案是先通过（大约4秒！）。

谢谢你们！

Answer 1

您应该将图像放在包装中，然后在包装器中聆听悬停，这不会改变其位置。这样你就可以获得持续的效果

编辑：问题是图像在鼠标输出上移动的程度低于div的大小（图像的原始大小）解决方案：在图像移动10px的情况下向div添加10px底部填充，以使其仍具有div背景，如果它徘徊。（更新链接）

TY Huangism的通知

Update example：

HTML


    <br />
    <div>< img src="http://placekitten.com/120/100" class="hoverImage" /></div>
    <div>< img src="http://placekitten.com/100/100" class="hoverImage" /></div>
    <div>< img src="http://placekitten.com/110/100" class="hoverImage" /></div>

JS

$(document).ready(function() {
$('div').hover(
    function(){
        //search for the image inside the wrapper (reffered to by this)
        $('.hoverImage', this).offset({'top':$(this).offset().top-10});
    },
    function(){
        $('.hoverImage', this).offset({'top':$(this).offset().top+10});
    }
);
});

CSS：

div{
    display: inline-block;
}
div:hover{
   padding-bottom: 10px;
}

Answer 2

在其上放置一个包装器并定位包装器以移动图像

http://jsfiddle.net/Ut8eK/4/

HTML

<div class="hoverImage"><img src="http://placekitten.com/120/100" /></div>

JS

$(document).ready(function() {
    $('.hoverImage').hover(
        function(){
            var $img = $(this).find('img');
            $img.offset({'top':$img.offset().top-10});
        },
        function(){
            var $img = $(this).find('img');
            $img.offset({'top':$img.offset().top+10});
        }
    );
});

对于多个div，您需要内联块css

在移动的图像元素的mouseout上口吃

2 个答案: