使用jQuery，以不透明度加载div .5

我在页面上有几张图片，它们的图片底部有50px的标题。当它们加载时，它们从不透明度1开始，但我希望它们以0.5开始。原因是有一个hover事件会将悬停时的不透明度设置为1，因此我希望它们从.5开始。使用jQuery，以不透明度加载div .5

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.fade').hover(function() { 
     $(this).stop().animate({"opacity": 1}); 
    },function() { 
     $(this).stop().animate({"opacity": .5}); 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="image_w_caption" style="float:left;margin:5px;"> 

    <div class="image" style="width:250px;height:188px;background:url(images/image.jpg) no-repeat 0 0;"> 
    </div> 

    <div class="fade" style="width:250px;height:188px;background:url(images/image_2.png) no-repeat 0 0;position:relative;top:-203;z-index:2;"> 
     <p style="padding:150px 5px 0 5px;z-index:3;color:white;">text</p> 
    </div> 

</div> 

<div class="image_w_caption" style="float:left;margin:5px;"> 

    <div class="image" style="width:250px;height:188px;background:url(images/image_2.jpg) no-repeat 0 0;"> 
    </div> 

    <div class="fade" style="width:250px;height:188px;background:url(images/image_2.png) no-repeat 0 0;position:relative;top:-203;z-index:2;"> 
     <p style="padding:150px 5px 0 5px;z-index:3;color:white;">more text</p> 
    </div> 

</div> 

</body> 
</html>

来源

2011-09-07 Adam

您可以设置不透明度在CSS或修改你的脚本一点：

$(document).ready(function(){ 
    $('.fade').hover(function() { 
     $(this).stop().animate({"opacity": 1}); 
    },function() { 
     $(this).stop().animate({"opacity": .5}); 
    }).css("opacity", 0.5); 
});

来源

2011-09-07 13:33:37 meo

小巧典雅的作品。谢谢。 – Adam

只需使用

$('.fade').css({opacity : '.5'})

之前您指定的悬停。或者像@meo指出你可以链接它，达到同样的目的，只需要少一个电话给dom。

$('.fade').hover(....).css({opacity : '.5'})

在你的CSS图片Live Demo

来源

2011-09-07 13:33:01 Loktar

那样做了。谢谢。是的，我应该明白这一点。我会尽我所能接受。 – Adam

或者他可以在悬停后将其链接，以避免两次选择相同的元素。 – meo

@Adam你应该考虑在悬停之后链接你的css命令，如我的例子中提到的那样。 – meo

使用trasparency：

.fade{ 
    /* IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

    /* IE 5-7 */ 
    filter: alpha(opacity=50); 

    /* Netscape */ 
    -moz-opacity: 0.5; 

    /* Safari 1.x */ 
    -khtml-opacity: 0.5; 

    /* Good browsers */ 
    opacity: 0.5; 
}

来源

2011-09-07 13:33:27 Samich

+1 Id必须同意这是一个更好的方法来设置它在JS中。 – Loktar

使用jQuery，以不透明度加载div .5

回答

相关问题