Question

我正在使用jQuery脚本在网页上制作50％不透明度的所有图像。当鼠标悬停/翻转特定图像时，该图像的不透明度将回到100％。

BEGIN SCRIPT

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

SCRIPT的结尾

我只希望我的投资组合/图库图像在网页上使用此代码。

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

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

感谢您的帮助！

Answer 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});
    });
});

Answer 2

假设您的图库有id个id="gallery"

纯CSS3： LIVE DEMO

#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);
});

Answer 3

您可以向想要影响的图像添加一个虚拟类，然后在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});
    });
});

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

Answer 4

您可以像在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});
  });
});

将jQuery分配给div？

4 个答案: