Question

我已帮助将代码悬停在图像上，并将另一张图像显示在原始图像上。

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

效果很好，但我希望第二张图片在悬停时滑动，然后在离开时滑动。我对此非常陌生并尝试，因为我可能无法让它工作。非常简化的帮助将不胜感激

Answer 1

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

你声明html中的两个图像（正常和悬停）都在'包含'div中开始，给这个容器提供与图像相同的宽度和高度（在我的例子中，我使用300px乘200px）。悬浮图像首先隐藏在框架外部（使用CSS上的绝对定位和容器div上的overflow: hidden）但是它会在悬停时滑入。

在此处查看演示：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/

Answer 2

你需要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/

将slideUp / slideDown添加到悬停功能

2 个答案: