Как применить FadeIn на Hover с фоновым IMG? - PullRequest
Новая
       31

Как применить FadeIn на Hover с фоновым IMG?

1 голос
/ 02 марта 2012

Я использовал этот jquery для пары приложений, которые в основном выполняют подкачку img с замиранием при переходе.Супер простой 

$(document).ready(function() {
    $("img.a").hover(
    function() {
        $(this).stop().animate({
            "opacity": "0"
        }, "fast");
    }, function() {
        $(this).stop().animate({
            "opacity": "1"
        }, "fast");
    });

});​

с HTML-разметкой 

<div id="leftBox" class="fadehover inline">
        <img src="images/leftTop.jpg" alt="" class="a" />
        <img src="images/leftBot.jpg" alt="" class="b" />
    </div>

CSS 

/*fadeHover*/
div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
        }

img.b {
    position: absolute;
    left: 0;
    top: 0;
    }

Мне интересно, можно ли это применить к фоновому изображению?

Я пытаюсь сделать это с помощью тега стиля, но безуспешно.

Спасибо

Ответы [ 3 ]

1 голос
/ 02 марта 2012

Я бы не стал делать это так, как вы, но этого можно добиться, одновременно анимируя другое изображение. Исходя из вашего HTML, это должно сделать это: 

$("img.a").hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, "fast");
        $("img.b").animate({"opacity": "1"}, "fast");
    },
    function() {
        $(this).stop().animate({"opacity": "1"}, "fast");
        $("img.b").animate({"opacity": "0"}, "fast");
    }
);​

jsFiddle пример .

0 голосов
/ 04 марта 2012

Я закончил этим 

$(document).ready(function(){
$('#home').mouseenter(function(){
$('.home_hover').fadeIn();
});

$('#home').mouseleave(function(){
$('.home_hover').fadeOut();
});
});

<div id="home">
<div class="home_normal">Home</div>
<div class="home_hover">Home</div>
</div>

с CSS 

#home{
    position:relative;
    float: left;
    height: 25px;
    width: 88px;
    padding-top: 12px;
}
.home_normal{
    position:absolute;
    height: 25px;
    width: 88px;
    left: 0px;
    top: 0px;
    padding-top: 12px;
}
.home_hover{
    background-image:url(../images/menuBG-1.0.jpg);
    height: 25px;
    width: 88px;
    position:absolute;
    display: none;
    left: 0px;
    top: 0px;
    padding-top: 12px;
}
0 голосов
/ 02 марта 2012

Да, это возможно. Ваш JS-код будет хорошо работать и для этого сценария. Просто нужно немного изменить класс img.a css. 

img.a {
        display: block;
        background: url('your-image') no-repeat bottom left;
        padding: 0 0px 32px 200px;
}​

Обратите внимание, что атрибут padding играет здесь важную роль, и, прежде чем его правильно установить, вы должны знать высоту и ширину фонового изображения, иначе изображение не будет полностью видимо.

Демо: http://jsfiddle.net/V7wB6/

...