0

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

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

在上图中，当鼠标悬停在图像上时，它会向上移动 2 个单位。鼠标移出时，图像返回到原始位置。如下所示，我的代码可以工作，但是当鼠标移动到先前腾出的区域（例如 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});
        }
    );
});

这是上面的 jsfiddle：http: //jsfiddle.net/rf5mE/

这非常适合我的需求，因为只需添加class="hoverImage"到适当的图像，添加功能就非常容易。

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

谢谢大家！

4

2 回答 2

2

您应该将图像放在包装器中，并聆听包装器中的悬停，这不会改变其位置。这样你应该得到一个恒定的效果

编辑：问题是鼠标移出时图像移动低于 div 的大小（图像的原始大小）解决方案：向 div 添加 10px 底部填充，如果图像移动 10px 低，仍然有一个 div如果它悬停在它的背景中。（更新链接）

TY Huangism for the notification

更新示例：

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;
}
于 2013-03-20T20:48:08.577 回答
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，您确实需要 inline-block css

于 2013-03-20T20:48:12.393 回答