Используя jQuery, загрузите div с непрозрачностью .5 - PullRequest
Новая
       43

Используя jQuery, загрузите div с непрозрачностью .5

0 голосов
/ 07 сентября 2011

У меня есть несколько изображений на странице с заголовками, которые перекрывают нижние 50 пикселей изображения.Когда они загружаются, они начинаются с непрозрачности 1, но я хочу, чтобы они начинались как .5.Причина в том, что есть событие hover, которое анимирует непрозрачность до 1 при наведении, поэтому я хочу, чтобы они начинались с 0,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>

Ответы [ 3 ]

1 голос
/ 07 сентября 2011

Используйте прозрачность для изображений в вашем CSS: 

.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;
}
1 голос
/ 07 сентября 2011

Вы можете установить непрозрачность в CSS или немного изменить свой скрипт: 

$(document).ready(function(){
    $('.fade').hover(function() { 
        $(this).stop().animate({"opacity": 1}); 
    },function() { 
        $(this).stop().animate({"opacity": .5}); 
    }).css("opacity", 0.5);
});
1 голос
/ 07 сентября 2011

Просто используйте 

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

Перед назначением наведения.Или, как указал @meo, вы можете связать его, добиться того же, просто на один звонок меньше. 

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

Live Demo

...