Note: BUG that jquery's fadeIn and fadeOut methods fail under IE-JS Tutorial-php.cn

Note: BUG that jquery's fadeIn and fadeOut methods fail under IE

巴扎黑

Release： 2017-06-30 10:45:38

Original

1314 people have browsed it

BUG1:Absolute positioningNested absolute positioning

I have encountered this problem many times, because I didn’t take notes, so every time I encountered this problem It takes half a day to study. It is absolutely true that a good memory is worse than a bad writing.

<p id="show_list">
      <p class=""  val="0">
           <p class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p>  
           <p  class="posab alce"  style="top:200px; width:260px; left:80px;">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </p>
       </p>

Copy after login

　　　　<p class=""  val="0">
           <p class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p>  
           <p  class="posab alce"  style="top:200px; width:260px; left:80px;">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </p>
       </p>

Copy after login

<p>

Copy after login

posab is an absolute positioning class

As long as the absolute positioning is replaced with floating, the effect of fading in and out can be achieved .

测试测试测试

Copy after login

The specific position needs to be adjusted

BUG2: Parent absolute positioning nested pictures that are larger than the parent size

There is another situation, which is a BUG unique to IE8. The format is as follows

 <p class=" posab" style=" top:80px; left:260px;width:550px;height:55px">
  <img class="png_bg" src="image.jpg" />
</p>

Copy after login

If the size of the picture exceeds the size of p, it will fade under IE8 The fade-out effect will be invalid

BUG3:

There is a bug on the Internet that I have not encountered in detail. I will post it now:

IE6 IE7 IE8 fadeIn() fadeOut() bug solution when position : relative

Let’s look at an example first


    <p>
        <p>I am going to fade in ;
        <p>I am going to fade in ;
    

$('.fadein').fadeIn();

Copy after login

The above code can basically achieve the expected results in all mainstream browsers

But the reality is cruel, and your html structure will certainly not be that simple.

Let’s add a little bit more

<style>
.relative{position: relative;}
</style>

Copy after login


    

        <p>I am going to fade in ;
        <p>I am going to fade in ;
    

$('.fadein').fadeIn();

Copy after login

At this time, the issue of shouting daddy will appear in IE 6 78. AnimationIf it doesn’t appear, will it happen? Directly show it and it will. do not have!

This is a notorious big IE bug: If the sub-elements of the fadeIn element have the position attribute, the relative value is the most serious. Elements with the position attribute will not have the effect of fadeIn!

Possible curve solutions:

1, without position: relative; This can sometimes be done

2, if 1 is really not possible, for example, the author encountered If so, use each(). You can do this effect one by one. Of course it can be done, but the efficiency is too poor and it may hang up the user's computer. For example, in the situation I encountered, there are dozens or hundreds of sub-elements. This method is tens of thousands of times. Don't let anything happen. .

Targeted solution

We want to achieve this effect without using position:relative without using each(), is that okay?

Can!

Since this is a bug, there must be a hack method

$(&#39;.fadein&#39;).css(&#39;position&#39;, &#39;relative&#39;).fadeIn();

Copy after login

Dynamicly change the position attribute to relative before fadeIn(); this bug under IE7 will be solved

<style>
.relative{position: relative; filter: inherit}
</style>

Copy after login

Add filter: inherit; to the elements whose child elements have the position attribute. Also add filter: inherit; to the first-level child elements of the current element.
As soon as these two are combined, the problems of IE678 will be solved

The above is the detailed content of Note: BUG that jquery's fadeIn and fadeOut methods fail under IE. For more information, please follow other related articles on the PHP Chinese website!