Databases
StackOverflow2013
Postsdbo
POIE chops off part of images with jQuery with .fadeIn .fadeOut
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE chops off part of images with jQuery with .fadeIn .fadeOut
    text
    copied!<p>Ok, here's the problem-- When I'm fading in or out on some absolutely positioned images, it's working in every browser except IE, the bane of my existence. And it's not even doing something that I've seen elsewhere-- it's fading the images, but during transition it chops of part of the image.</p> <p>Here's the code I'm using for the slideshow:</p> <pre><code> jQuery(function(){ $('#images div:gt(0)').hide(); setInterval(function(){ $('#images .current').fadeOut(1000, function({$(this).removeClass('current')}) .next('#images .slide').fadeIn(1000).addClass('current') .end().appendTo('#images');}, 6000); }); </code></pre> <p>And here's some HTML:</p> <pre><code> &lt;div id="images"&gt; &lt;div class="slide current"&gt; &lt;a href=""&gt;&lt;img class="centerlarge" src="jpg" width="349" height="241" alt="" /&gt;&lt;/a&gt; &lt;img class="leftsmall" src="jpg" width="116" height="115" alt="" /&gt; &lt;img class="rightsmall" src="jpg" width="132" height="130" alt="" /&gt; &lt;/div&gt; &lt;div class="slide"&gt; &lt;a href=""&gt;&lt;img class="centerlarge" src="jpg" width="349" height="232" alt="" /&gt;&lt;/a&gt; &lt;img class="leftsmall" src="jpg" width="116" height="115" alt="" /&gt; &lt;img class="rightsmall" src="jpg" width="132" height="130" alt="" /&gt; &lt;/div&gt; &lt;div class="slide"&gt; &lt;a href=""&gt;&lt;img class="centerlarge" src="jpg" width="349" height="232" alt="" /&gt;&lt;/a&gt; &lt;img class="leftsmall" src="jpg" width="116" height="115" alt="" /&gt; &lt;img class="rightsmall" src="jpg" width="132" height="130" alt="" /&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- images --&gt; </code></pre> <p>Like I said, the only CSS I'm using is the absolute positioning, which is not causing the problem by itself-- I switched it off, but IE still chops off part of the images. I have tried the cleartype fix, but that also did not work. </p> <p>Has anyone else ever seen this problem? I am entirely confused. </p> <p>Edit [rodaine]: Here is a picture of this issue. <img src="https://i.stack.imgur.com/uyYlD.png" alt="enter image description here"></p> <p>Edit [rodaine]: And here is a picture of how it's supposed to look (notice the tomatoes and strawberries) <img src="https://i.stack.imgur.com/KOBAY.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload