CODEWITHSUNDEEP
jqueryinternet-explorer-7
user1058223
user1058223

Reputation: 147

jQuery FadeIn, FadeOut Div - IE7 bug

I have a div that will fade in and out on hover in FF, but in IE7 it just hides and shows with no animation. Here is my code:

#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");
    });
});

Upvotes: 4

Views: 1484

Answers (3)

user1058223
user1058223

Reputation: 147

I was able to fix this by fadeToggle() each button directly instead of the <div id=nav-buttons> here is what I did: 

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

Upvotes: 1

craniumonempty
craniumonempty

Reputation: 3535

Don't have IE7, but maybe try this for now. Doesn't fix, but shows content when it needs to be shown... Well, unsure on IE7, but had kind of a similar prob with IE9.

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

Also, maybe get rid of "display:none;", because it's acting odd... or did you want that?

edit: I found that it may work just to re-add fadeToggle in the queue function. Ah, you want something to show when you hover over something else. I get it now. Maybe just add another fadeToggle in the queue, or fade out when the mouse is no longer over the div.

edit2: seeing as you want to appear and disappear, maybe this:

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

If you want to change to fadeToggle, I'd suggest removing display:none when you call it or it will keep going off screen. Then you can put it back when you are leaving.

Edit3: according to link try:

Fading issues in Internet Explorer 7 when using 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",'');
            });
        });
});

If that doesn't work, you're probably going to have to use straight css.

Upvotes: 0

ggzone
ggzone

Reputation: 3711

fadeToggle is Buggy in IE7 ! If you get it working somehow you will also see if you fading font that IE7 will make some strange antialiasing to this font while fiding in or out... very ugly.

Use color animation (if possible becouse of background) or try .fadeIn() and .fadeOut() instead

Upvotes: 0

Related Questions