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 回答