图像悬停效果 (jquery/javascript)答案

【问题标题】：Hover effect on images (jquery/javascript)图像悬停效果 (jquery/javascript)
【发布时间】：2014-07-26 16:37:35
【问题描述】：

我想要一个与本网站首页图片类似的悬停效果：http://www.arken.dk/default.aspx 我已经制作了带有悬停效果的 html 和 css，但是由于悬停类一次仅适用于一张图像，因此位置的更改一次仅适用于一张图像。据我所知，只要一个图像悬停，我就需要一些脚本来更改所有图像的 css。此外，它不应该只是悬停效果。在网站上，即使图像不再悬停，图像的位置仍然保持不变？

任何人都知道如何做到这一点，或者可能有指向教程等的链接？

我不确定这个效果叫什么，所以我在谷歌上找不到任何有用的东西:(

提前致谢:)

【问题讨论】：

搜索“水平手风琴 jquery”。仅供参考，这种问题并不真正符合 SO 规则

标签： jquery html css hover

【解决方案1】：

工作示例：http://jsfiddle.net/SBpzX/2/

<div id="container">  
    <div class="text">one</div>
</div>

$(document).ready(function() {
    $('.text').hide();
    $('img').animate({
        opacity:1

    });

    $('img').hover(function() {
        $(this).stop().animate({opacity:.4},200);
        $('.text').fadeIn();

    }, function() {
        $(this).stop().animate({opacity:1},500)
        $('.text').fadeOut();
    });


});

css

img
{    
    position:absolute;
    left:0;
    top:0;
}

#container {
    width: 400px;
    height: 267px;
}

.text {
    color: black;
    position: relative;
    text-align: center;
    top: 50%;
    font-family: Arial, Verdana;
    color: #000;
    font-size: 5em;
    font-weight: bold;
    text-shadow: 1px 1px #fff;
}

【讨论】：

谢谢 Sirushti，这是我一直在寻找的解决方案。

【解决方案2】：

您可以使用jQuery Accordion 执行此操作。

【讨论】：

非常感谢。正是我想要的:)

【解决方案3】：

例如 YUI 库中的一个组件：http://yuilibrary.com/gallery/show/accordion-horiz-vert

【讨论】：

【解决方案4】：

下载 jquery 并使用它...

$(#'image need to be hovered').mouseover(function()
{
  $(#'images need be be cahnged in this effect').attr('src','image path')
})

例如：div的id为img1，需要更改的图片为img1,img2,img3

考虑一下

$('#img1').mouseover(function()
    {
      $('#img1').attr('src','image path for hover image');
      $('#img2').attr('src','image path for hover image');
      $('#img3').attr('src','image path for hover image');
    });

鼠标移出

 $('#img1').mouseout(function()
        {
          $('#img1').attr('src','image path for original image');
          $('#img2').attr('src','image path for original image');
          $('#img3').attr('src','image path for original image');
        });

【讨论】：