All geek questions in one place

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 without 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"); }); });
+4
source share
3 answers

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

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

I don't have IE7, but maybe try this now. It doesn’t fix, but shows content when it needs to show ... Well, unsure of IE7, but had a similar problem with IE9.

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

It is also possible to get rid of "display: none;" because it acts oddly ... or do you need it?

edit: I found that it can only work to re-add fadeToggle to the queue function. Ah, you want something to show when you were aiming for something else. I get it now. Maybe just add another fadeToggle to the queue or disappear when the mouse is no longer above the div.

edit2: seeing how 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 switch to fadeToggle, I would suggest deleting the display: no, when you call it, or it will continue to exit the screen. Then you can return it when you leave.

Edit3: follow the try link:

Troubleshoot Internet Explorer 7 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 probably have to use direct css.

0
source

fadeToggle Buggy in IE7! If you earn it somehow, you will also see if you will fade away the font, which IE7 will make a strange smoothing of this font when entering or exiting ... very ugly.

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

0
source

Source: https://habr.com/ru/post/1382321/

More articles:


All Articles