1

我找到了一个简单的 jquery 脚本，它通过悬停列表中的图像来将图像的不透明度设置为 0。我喜欢这种效果，但它仅适用于 ul 包装画廊中的 1 张图像。我的答案是，我怎么能对 jquery 说，嘿，对 ul 中的所有图像执行此操作，图像在列表 listet 中的位置，当我悬停画廊 div/ul 时？

编辑：我在这里使用两个类，灰色和颜色。在灰色类图像之下是彩色类图像。灰度等级将设置为 0，然后将显示彩色图像。这仍然适用于悬停该列表中的 1 张图像，但我喜欢同时通过悬停 gallery_container div 或 ul 库来对所有图像产生这种效果。有人可以帮忙，如何为此编写jquery？

HTML

<div class="gallery_container">
    <ul class="gallery">
        <li> <a href="#"><img src="images/01_grey.gif" class="grey" /></a>
            <img src="images/01_color.gif" class="color" />
        </li>
        <li> <a href="#"><img src="images/02_grey.gif" class="grey" /></a>
          <img src="images/02_color.gif" class="color" />
        </li>
    </ul>
</div>

jQuery

$(document).ready(function(){
    $("img.grey").hover(
    function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

CSS

.gallery li {
    float: left;
    margin-right: 20px;
    list-style-type: none;
    margin-bottom: 20px;
    display: block;
    height: 130px;
    width: 130px;
    position: relative;
}

img.grey {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

img.color {
    position: absolute;
    left: 0; top: 0;
}
4

4 回答 4

0

-编辑-

OP 想要的效果是灰度<->颜色，而不是不透明度。

OP的参考：http ://themes.quemalabs.com/elitist/

更新小提琴：http: //jsfiddle.net/bwbNH/

操作，

据我了解，每当用户将鼠标悬停在任何图像上时，您都希望淡出所有图像。虽然我不知道您的用例，但这可能会令人困惑，因为它并不完全是标准的。无论如何，我建议将您的事件绑定到父级并将动画分配给它的子级：ul.gallery$(this).children('li')

小提琴：http: //jsfiddle.net/KaZFL/

JS

$(document).ready(function () {
    $(".gallery").mouseenter(function () {
        $(this).children('li').stop().animate({
            "opacity": "0"
        }, "slow");
    }).mouseleave(function () {
        $(this).children('li').stop().animate({
            "opacity": "1"
        }, "slow");
    });
});
于 2013-03-13T04:41:43.890 回答
0

尝试。

$(".gallery_container").hover(
function()
{
    $(this).find('img').stop().animate({"opacity": "0.5"}, "slow");
},
function()
{
    $(this).find('img').stop().animate({"opacity": "1"}, "slow");
});

看Fiddle

于 2013-03-13T04:20:28.397 回答
0

这是更新javascript：

$(document).ready(function(){
  $('.gallery').hover(function() {
    $('.gallery img').stop().animate({"opacity": "0"}, "slow");
  }, function() {
    $('.gallery img').stop().animate({"opacity": "1"}, "slow");
  });
}
于 2013-03-13T04:21:39.320 回答
0 
Try something like this:    

$('ul.gallery li a img.grey').hover(function(e){
e.preventDefault();
...
...
});
于 2013-03-13T04:35:44.967 回答