0

我正在使用 jQuery 脚本在网页上以 50% 的不透明度制作所有图像。当鼠标悬停/滚动到特定图像上时，该图像的不透明度将恢复为 100%。

开始脚本

$(document).ready(function(){
    $('a img').animate({
        opacity:.5
    });
    $('a img').hover(function(){
        $(this).stop().animate({opacity:1});
    }, function(){
        $(this).stop().animate({opacity:.5});
    });
});

脚本结束

我只希望我的作品集/画廊图像在网页上使用此代码。

如何将此代码分配给网页上的一组特定图像，这样其他带有链接的图像就不会受到影响？示例：我不希望我的徽标和其他一些带有链接的图像受到网页 HEAD 部分中的 jQuery 代码的影响。

现在我可以从图像中删除一个链接以获得我正在寻找的结果。这不是我想要的页面设置方式，只是一个临时修复。

感谢您的帮助！

4

4 回答 4

1

您可以在具有此行为的图像上放置一个特异性类。

$(document).ready(function(){
    $('a img.classtoopacity').animate({
        opacity:.5
    });
    $('a img.classtoopacity').hover(function(){
        $(this).stop().animate({opacity:1});
    }, function(){
        $(this).stop().animate({opacity:.5});
    });
});
于 2013-07-30T19:10:17.133 回答
1

假设您的画廊有一个id赞id="gallery"

纯 CSS3：现场演示

#gallery a img{
    opacity: 0.5;

    -webkit-transition: opacity 0.4s;
        -ms-transition: opacity 0.4s;
         -o-transition: opacity 0.4s;
            transition: opacity 0.4s;
}
#gallery a img:hover{
    opacity: 1;
}

使用 jQuery 的示例：LIVE DEMO jQuery

$(function(){

    $('#gallery a img').animate({opacity:0.5}).hover(function( e ){
        $(this).stop().animate({opacity: e.type=="mouseenter" ? 1 : 0.5 });
    });

});

您还可以使用fadeTo([time],[opacity])以下方法：

$('#gallery a img').fadeTo(400,0.5).hover(function( e ){
    $(this).stop().fadeTo(400,e.type=="mouseenter" ? 1 : 0.5);
});
于 2013-07-30T19:13:17.150 回答
0

您可以将一个虚拟类添加到您想要影响的图像中，然后将该类包含在 jQuery 选择器中。所以，如果你给class='hover-fade'你的图像，那么你可以使用：

$(document).ready(function(){
    $('a img.hover-fade').animate({
        opacity:.5
    });
    $('a img.hover-fade').hover(function(){
        $(this).stop().animate({opacity:1});
    }, function(){
        $(this).stop().animate({opacity:.5});
    });
});

因此，由于您的徽标没有分配给它的类，它不会受到脚本的影响。

于 2013-07-30T19:09:21.733 回答
0

您可以像在 CSS 中一样在 jQuery 中使用选择器。例如，如果您的画廊是

<div class="gallery"><a><img><a><img>...

您只需添加到当前选择器即可定位图库中的所有图像：

$('.gallery a img')...

或者，为了适合你的代码（不知道你的画廊是什么）：

$(document).ready(function(){
  $('.gallery a img').animate({
     opacity:.5
  });
  $('.gallery a img').hover(function(){
      $(this).stop().animate({opacity:1});
  }, function(){
      $(this).stop().animate({opacity:.5});
  });
});
于 2013-07-30T19:10:37.457 回答