Как мне сделать ролловер с помощью png и jquery? - PullRequest
Новая
       36

Как мне сделать ролловер с помощью png и jquery?

1 голос
/ 09 ноября 2011

Я задал обратный код сценария, который нашел в Интернете, и он работает хорошо, единственная проблема заключается в том, что изображение при наведении мыши загружается при полной видимости, пока не произойдет действие при наведении.Это скрипт: 

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

});
</script>

Это файл CSS: 

<style>
div.fadehover {
    position: relative;
    }

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

        z-index: 10;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    }
</style>

А это код тела: 

<div class="fadehover">
<a href=""><img src="portfolio_a.png" alt="" class="a" />
<img src="portfolio_b.png" alt="" class="b" /></a>

</div>

Вы можете просмотреть образецоб этом здесь: http://www.kaimeramedia.com/derek/Website/test.html

1 Ответ

2 голосов
/ 09 ноября 2011

Измените свой CSS, чтобы он скрывал при загрузке: 

img.b {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    opacity: 0;
    filter: alpha(opacity=0);
}

Линия filter:alpha(opacity=0); предназначена для I.E.

Вот jsfiddle вышеупомянутого решения: http://jsfiddle.net/jasper/CyJXD/

...