Фоновое изображение мерцает с помощью jQuery .animate () - PullRequest
Новая
       27

Фоновое изображение мерцает с помощью jQuery .animate ()

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

Я пытаюсь создать суб-навигацию для портфолио фотографий с анимацией.Обычно я делаю это с переходом CSS3, но мне нужно решение jQuery для Internet Explorer 7-9.

Проблема в том, что фоновые изображения почему-то мерцают при наведении, и я абсолютно не знаю, почему.В другом браузере, например, FF все выглядит хорошо, просто все IE создают проблемы.Я много читал, много пробовал, но, кажется, ничто не делает его лучше.

Вы поймете, что я имею в виду, когда наведите курсор на пункты на следующей тестовой странице http://www.webatweiss.de/test/test.html

КодСледующий фрагмент: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title>gallery</title>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script>
$(document).ready(function(){
    $("#subnav a").hover(
    function() {$(this).stop().animate({"width":"96px", "height":"96px", "marginTop":"-48px", "marginLeft":"-48px", "backgroundPosition":"-2px -2px"}, 200);},
    function() {$(this).stop().animate({"width":"86px", "height":"86px", "marginTop":"-43px", "marginLeft":"-43px", "backgroundPosition":"-7px -7px"}, 150);});
    })
</script>

<STYLE type="text/css"> 
* {margin:0px;padding:0px;}
BODY{font:12px/100% arial;background:#a2a2a2;}
a {text-decoration:none;outline:none;border:none;}
ul {width:auto;float:left;list-style-type:none;}
ul#subnav {height:96px;position:relative;margin:50px;}
ul#subnav li {height:96px;width:96px;position:relative;float:left;margin-right:17px;}
ul#subnav li:last-child {margin-right:0px;}
a {width:86px;height:86px;position:absolute;border-radius:43px;top:50%;left:50%;margin:-43px 0px 0px -43px;background-position: -7px -7px;box-shadow: 0px 2px 3px #777;behavior:url(PIE.php);}
a:hover {width:96px;height:96px;border-radius:48px;top:50%;left:50%;position:absolute;margin:-48px 0px 0px -48px;background-position:-2px -2px;box-shadow: 0px 3px 4px #777;}
</style>
</HEAD>

<body>
    <ul id="subnav" >
        <li><a href="#" style="background-image:url(img/01.jpg);"></a></li>
        <li><a href="#" style="background-image:url(img/02.jpg);"></a></li>
        <li><a href="#" style="background-image:url(img/03.jpg);"></a></li>
        <li><a href="#" style="background-image:url(img/04.jpg);"></a></li>
        <li><a href="#" style="background-image:url(img/05.jpg);"></a></li>
    </ul>
</body>
</html>

1 Ответ

0 голосов
/ 26 ноября 2011

Я видел это несколько раз. Хотя он не сделал абсолютно идеальный переход, он помогает.

Добавьте это в свой CSS на изображениях, которые вы скользите. 

opacity: 1;
filter: alpha(opacity=100);
zoom: 1;
...