添加 slideUp / slideDown 到悬停功能

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 开头，使该容器具有与图像相同的宽度和高度（在我的示例中，我使用了 300 像素 x 200 像素） .悬停图像最初隐藏在框架之外（在图像上使用绝对定位，在容器 div 上使用 CSS 使用 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" );
        }
     );
 });

已编辑：为了说明页面上发生的动画不止一个，我稍微改变了结构/编写内容的方式（见下文 cmets）。

最新演示在这里：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/