0

我得到了代码的帮助，可以将鼠标悬停在图像上，并让另一个图像出现在原始图像上。

$('.hoverpic').hover(function () {
    $(this).attr('src',$(this).attr('src').replace('.jpg','_hover.jpg'));
}, function () {
    $(this).attr('src',$(this).attr('src').replace('_hover.jpg','.jpg'));
});

它运作良好，但我希望第二张图像在悬停时滑动，然后在离开时滑动。我对此很陌生，请尝试一下，因为我可能无法使其正常工作。非常简化的帮助将不胜感激

4

2 回答 2

0

此方法假定图像具有相同的宽度和高度，并且具有固定的宽度/高度。

您在 html 中声明两个图像（普通图像和悬停图像）以“包含”div 开头，使该容器具有与图像相同的宽度和高度（在我的示例中，我使用了 300 像素 x 200 像素）。悬停图像最初隐藏在框架之外（使用图像overflow: hidden上的绝对定位和带有 CSS 的容器 div 上），但它在悬停时滑入。

在此处查看演示：http: //jsfiddle.net/2JSxK/7/

只需将那里的 HTML 替换为：

<div id="image-container">
    <img class="pic" src="YOURIMAGENAME.jpg" />
    <img class="hoverpic" src="YOURIMAGENAME_hover.jpg" />
</div>

以及带有图像宽度和高度的 CSS：

#image-container {
    position: relative;
    width: 300px; /* put your image width in pixels here */
    height: 200px; /* put your image height in pixels here */
    overflow: hidden;
    }

#image-container img.pic {
    position: absolute;
    top: 0;
    left: 0;
    }

#image-container img.hoverpic {
    position: absolute;
    top: 200px; /* put your image height in pixels here */
    left: 0;
    }

在 jQuery 中也是如此，只需200用您的图像高度（以像素为单位）替换两次：

$(document).ready(function() {
    $('.pic').hover( 
        function () {
            $('.hoverpic').animate({ "top": "-=200px" }, "slow" );
        },
        function () {
            $('.hoverpic').animate({ "top": "+=200px" }, "slow" );
        }
     );
 });

您还可以将上述速度更改"slow"为"fast"或以毫秒为单位的数字，例如。1000将是一秒钟。取决于您希望滑动明显发生多快！

更正：悬停效果现在与容器而非单个图像相关联，因此当您移动鼠标时悬停图像不会消失。

在此处查看演示：http: //jsfiddle.net/2JSxK/16/

新的 jQuery：

$(document).ready(function() {
    $('#image-container').hover( 
        function () {
            $('.hoverpic').animate({ "top": "-=200px" }, "slow" );
        },
        function () {
            $('.hoverpic').animate({ "top": "+=200px" }, "slow" );
        }
     );
 });

编辑：为了解释页面上发生的不止一个动画，我稍微改变了我的结构/编写方式（见下面的评论）。

最新演示：http: //jsfiddle.net/2JSxK/17/

于 2013-09-09T20:33:18.273 回答
0

为此，您需要 slideToggle： http ://api.jquery.com/slideToggle/

<div id="container">
<img id="img1" src="http://images2.wikia.nocookie.net/__cb20120626230828/watchdogs/images/6/6c/IE-icon.png" alt="" />
<img id="img2" src="http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" style="display:none"/>
</div>

$('#container').hover(function() {
    $('#img1').slideToggle(500, 'linear');
    $('#img2').slideToggle(500, 'linear');
});

检查这个小提琴 http://jsfiddle.net/suneeel/SRNJb/1/

于 2013-09-09T20:40:45.470 回答