jQuery FadeIn, FadeOut Div - ошибка IE7

Question

У меня есть div это будет появляться и исчезать при наведении курсора в FF, но в IE7 он просто скрывается и отображается без анимации. Вот мой код:

#nav-buttons {
    display:none;
    width:894px;
    position:relative;
    z-index:1000;
}
#left-button, #right-button {
position:absolute;
width:46px;
height:76px;        
}
#left-button {
background:url("images/arrows.png") no-repeat scroll -88px -60px transparent;
left:-46px;
}
#left-button:hover {
background-position:-88px -260px;
}
#right-button {
background:url("images/arrows.png") no-repeat scroll 3px -60px transparent;
right:-43px;
}
#right-button:hover {
background-position:4px -260px;
}


----------
<div id="contents">
<div id="nav-buttons">
    <a href="javascript:void(0)" id="left-button"></a>
    <a href="javascript:void(0)" id="right-button"></a>
</div>
 other html....
</div>

----------

$(document).ready(function() {                  
    $("#contents").hover(function() {
        $("#nav-buttons").fadeToggle("slow");
    });
});

Answer 1

Я смог исправить это с помощью fadeToggle() для каждой кнопки непосредственно вместо <div id=nav-buttons> вот что я сделал:

$(document).ready(function() {                  
   $("#contents").hover(function() {
      $("#left-button").fadeToggle("slow");
      $("#right-button").fadeToggle("slow");
   });
 });

Answer 2

fadeToggle - это багги в IE7! Если вы заставите его работать каким-то образом, вы также увидите, исчезнет ли шрифт, что IE7 сделает странное сглаживание для этого шрифта, в то же время обнаруживая или удаляя... очень уродливо.

Используйте цветную анимацию (если возможно из-за фона) или попробуйте вместо нее.fadeIn() и.fadeOut()

Answer 3

У меня нет IE7, но, возможно, попробуйте это сейчас. Не исправляет, но показывает контент, когда его нужно показать... Ну, неуверенный в IE7, но у него была похожая проблема с IE9.

$(document).ready(function(){                  
    $("#contents").hover( function() {
        $("#nav-buttons").fadeToggle("slow").queue(function() {
            $(this).fadeIn("slow");
            $(this).dequeue();
          });
    });
});

Кроме того, может быть, избавиться от "display:none;", потому что он действует странно... или вы этого хотели?

редактировать: я обнаружил, что это может работать только для повторного добавления fadeToggle в функцию очереди. Ах, вы хотите что-то показать, когда вы наводите на что-то другое. Я получаю это сейчас. Может быть, просто добавьте еще один fadeToggle в очередь, или исчезните, когда мышь больше не находится над div.

edit2: видя, как вы хотите появляться и исчезать, может быть это:

$(document).ready(function(){                  
    $("#contents").mouseenter( function() {
        $("#nav-buttons").fadeIn("slow");
    }).mouseleave( function() {
        $("#nav-buttons").fadeOut("slow");
    });       
});

Если вы хотите изменить на fadeToggle, я бы посоветовал удалить display: none, когда вы его вызываете, или он будет продолжать отключаться. Затем вы можете положить его обратно, когда вы уходите.

Edit3: по ссылке попробуйте:

Проблемы с замиранием в Internet Explorer 7 при использовании jQuery

$(document).ready(function(){                  
    $("#contents")
        .mouseenter( function() {
            $("#nav-buttons").delay(200).fadeIn(function(){
              $(this).css("filter",'');
            });
        })
        .mouseleave( function() {
            $("#nav-buttons").delay(200).fadeOut(function(){
              $(this).css("filter",'');
            });
        });
});

Если это не сработает, вам, вероятно, придется использовать прямой CSS.