当我通过使用相同的类并通过 $this 访问它时,我试图为单个元素的不透明度设置动画。
我知道我可以通过为每个项目添加不同的命名类来解决这个问题,但是随着我的应用程序的增长,这将不是一个可行的解决方案,下面是我的代码,它目前将所有三个图像不透明度设置为 1。
<script>
$(document).ready(function(){
$(".videos").hover(function(){
var $this = $(this),
$focus = $this.find('.video');
$focus.stop().animate({opacity: 1.0 }, 500);
}, function(){
$(".video").stop().animate({opacity: 0.6 }, 500);
});
});
</script>
这是html:
<div class="videos">
<div class="row-fluid">
<div class="span12">
<h3>LATEST VIDEOS</h3>
<div class="row-fluid">
<div class="span4 video1">
<a href="#"><img class="video" src="images/media/vid1.jpg"/></a>
<p>A description of the video will go here for the user to see,
once a user clicks a video the player will be enlarged and the other
videos shall be forced underneath</p>
</div>
<div class="span4 video2">
<a href="#"><img class="video" src="images/media/vid2.jpg"/></a>
<p>A description of the video will go here for the user to see,
once a user clicks a video the player will be enlarged and the other
videos shall be forced underneath</p>
</div>
<div class="span4 video3">
<a href="#"><img class="video" src="images/media/vid3.jpg"/></a>
<p>A description of the video will go here for the user to see,
once a user clicks a video the player will be enlarged and the other
videos shall be forced underneath</p>
</div>
</div>
</div>
</div>
</div>
我已经尝试浏览其他网络资源,但我还没有找到解决方案,我确定我在某个地方犯了一个愚蠢的错误。
任何指针将不胜感激。