当前位置:jQuery学习 > jQuery > jQuery Opacity图片聚焦效果

jQuery Opacity图片聚焦效果

时间:2010-10-13QQ群:116983258

前些天在一个网站上看到使用Opacity实现的效果,当用户光标停留在某个图片上时,其余图片改为半透明状态,使得用户的注意力停留在当前的图片上。接下来我们就使用jQuery改变图片Opacity来实现这一效果。

以下为简单的html脚本:

<div id="showimg">
    <img src="img.jpg" />
</div>

jQuery操作Opacity属性的代码如下:

$(document).ready(function() {
    $("#showimg img").hover(function() {
        $(this).siblings().stop().fadeTo(500, 0.5);
    }, function() {
        $(this).siblings().stop().fadeTo(500, 1);
    });
});

里边使用了siblings()方法,此方法取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,在本例中就是返回img的同级对象。接下来使用stop()方法停止所有在指定元素上正在运行的动画,并将不透明度设置为50%。

到这里,我们使用jQuery改变opacity属性,从而实现了图片的聚焦效果。

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-use-opacity-show-focus.html

所有话题