Как заставить div исчезать при наведении курсора?

Question

Привет У меня в настоящее время есть диапазон, который отображается над изображением при наведении, однако я хочу использовать немного переходов javascript или css, чтобы этот div постепенно увеличивался до 0,8 непрозрачности при наведении, а затем обратно на 0, когда мышь не зависает.

Вот пример того, как я его настроил до сих пор, теперь все, что нужно, это затухание и непрозрачность 0.8:

Как его настройка - Jsfiddle

Я уверен, что есть небольшой фрагмент кода, который кто-то должен сделать это

Помощь очень ценится, спасибо!

Answer 1

Итак ... вот CSS3 / HTML5-способ сделать это. Однако в IE это не сработает: он будет использовать обычный, немедленный способ (поэтому он работает, но не так гладко, как в реальных браузерах).

div.yourDiv {
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
}

div.yourDiv:hover {
    opacity: 0.8;
}

Поскольку CSS3-переходы используют аппаратное ускорение, это действительно очень гладко! Кроме того, вам даже не нужен Javascript или jQuery для этого =)!

Answer 2

Вы можете использовать псевдокласс :hover в CSS, если только вам не требуется поддержка IE6:

.image-hover:hover {
    opacity: .8;
}

* html .image-hover:hover { /* For IE7 and higher */
    filter: alpha(opacity=80);
}

Это не затухает до 80%, хотя этопросто иди туда немедленно.Для этого вы можете использовать функции jQuery hover и animate ( edit : или fadeTo, чтопросто удобная оболочка для animate на opacity, как показано ниже):

$(".image-hover").hover(
    function() {
        $(this).stop().animate({opacity: "0.8"});
    },
    function() {
        $(this).stop().animate({opacity: "1"});
    }
);

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

Вот обновленная версия вашей скрипки , показывающая анимацию;Я использовал 0,6, а не 0,8, так что это более очевидно.

Answer 3

.classa
{
opacity:0.8;
}

вы можете addClass и removeClass как

$("div.image-hover").hover(
function(){
//fadein
$(this).addClass("classa");
},
function(){
//fadeout
    $(this).removeClass("classa");
}
);

вот скрипка http://jsfiddle.net/2RN6E/8/

ИЗМЕНЕНО после комментария ниже

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

$("div.image-hover").hover(
function(){
//fadein
$(this).fadeTo( "2000", "0.8");
},
function(){
//fadeout
    $(this).fadeTo( "2000","1");
}

вот скрипка http://jsfiddle.net/2RN6E/14/ );

Answer 4

Этот код сохраняет отображение блока для элемента описания: http://jsfiddle.net/2RN6E/11/

Он просто использует функцию анимации jQuery:

$(".image-hover").hover(function() {
    $(".desc").animate({opacity: '0.75'},'slow');
}, function() {
    $(".desc").animate({opacity: '0'},'slow');   
});

Answer 5

Вы можете сделать:

function fadein() {
    $('.desc').animate({
        opacity: 0.8,

    }, 1000, function() {
        // Animation complete.
    })

}

function fadeout() {
    $('.desc').animate({
        opacity: 0,

    }, 1000, function() {
        // Animation complete.
    })

}

$('.image-hover').hover(fadein, fadeout);

скрипка здесь: http://jsfiddle.net/nicolapeluchetti/2RN6E/9/