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; ", потому что он действует странно ... или вы этого хотели?

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

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

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

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

Edit3: по ссылке try:

Проблемы с замиранием в 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.