Как мне исчезнуть в div, который имеет заданную непрозрачность?

Question

У меня есть div, заполненный информацией на этом блоге , и я установил его с определенной прозрачностью, используя CSS. Как сделать так, чтобы он "исчезал", используя jQuery до 90 или 100% при наведении курсора на этот div?

.infoHolder2 {
position:absolute;
color:#FFF;
background:#9f9377;
padding:15px;
padding-top:23px;
z-index:5;
width:97.7%;
bottom:8px;
margin:-8px;
opacity:0.2;filter:alpha(opacity=20)
}

<div class="infoHolder2"><div id="title">I'm {Title} and I like <span id="stuff"></span>.  
</div><img id="portrait" src="{PortraitURL-128}"><img id="portraitCover"   
src="http://static.tumblr.com/ux4v5bf/3Uolhxkyl/cover.png">
<div id="infoHolder">{Description}</div></div>

Answer 1

Попробуйте jquery fadeto () .

Это должно сработать (исчезнуть до 90% за 500 мс):

$(".infoHolder2").fadeTo(500, 0.9);

Answer 2

также с помощью CSS3 без использования jquery

.image {

    position: relative;
        overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
        opacity:1;
filter:alpha(opacity=100);

}
.image:hover {

        opacity:0;
filter:alpha(opacity=0);
    }

Answer 3

Использовать jQueries fadeTo

Использование http://api.jquery.com/fadeTo/

fadeTo(duration, opacity)

Пример

//90% Opacity
$('.infoHolder2').fadeTo("slow", 0.90);

//100% Opacity
$('.infoHolder2').fadeTo("slow", 1);

При наведении

$('.infoHolder2').hover(
        function(){
            $(this).fadeTo('slow', 0.90);
        },function(){
            $(this).fadeTo('slow', 0.50);
        } 
);

Демонстрация в реальном времени

Answer 4

Я думаю, что должно работать следующее:

$('.infoHolder2').fadeTo(500,'1');

Стоит отметить порядок аргументов в методе fade(), сначала идет длительность, за которой следует значение требуемого opacity.По какой-то причине я всегда путаю их при записи.Спасибо @alex за комментарий.

Вы также можете, если хотите, использовать:

$('.infoHolder2').animate({'opacity':'1'},500);

Но, если вы не анимируете другие свойства, он становится немного менее лаконичным.для того же эффекта.

Демонстрация JS Fiddle для охвата обоих вариантов .

Ссылки:

• fadeTo(),
• animate().

Отредактировано в соответствии с требованиями OP, чтобы запустить его на hover()

$('ul li').hover(
    function(){
        var which = $(this).index();
        if (which == 0){
            $(this).fadeTo(500,'1');
        }
        else {
            $(this).animate({'opacity':'1'},500);
        }
    },
    function(){
        $(this).fadeTo(500, 0.5);
    }
);

JS Fiddle demo .

Answer 5

Вы можете использовать fadeTo().

Чтобы уменьшить прозрачность до 90%, используйте это ...

$('.infoHolder2').hover(function() {
    $(this).fadeTo(1000, 0.9);
}, function() {
    $(this).fadeTo(1000, 0);
});

jsFiddle .