Databases
StackOverflow2013
Postsdbo
POTrouble with the jQuery animate function?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrouble with the jQuery animate function?
    text
    copied!<p>I needed a simple three slides slider, so instead of using a jQ plugin I hand coded it myself. The code works but the animation occurs in 2-3 frames instead of happening in over 20 frames, except when in IE6 &amp; IE7 where it animates perfectly in 20-30 frames. In all the other browsers(IE8, Firefox, Chrome, Safari, Opera) it animates in a motion which seems like the computer is hanging. If anyone knows why this is happening please lemme know. I don't wanna use a bulky plugin and then style it too.</p> <p>HTML:</p> <pre><code>&lt;div class="fl-left" id="slide-box"&gt; &lt;div class="slide" id="slide-1"&gt; &lt;img src="images/slider/1.jpg" alt="The Image Description" /&gt; &lt;p class="slide-text"&gt;&amp;quot;The Description About The Image/Slide&amp;quot;&lt;/p&gt; &lt;/div&gt; &lt;div class="slide" id="slide-2"&gt; &lt;img src="images/slider/1.jpg" alt="The Image Description" /&gt; &lt;p class="slide-text"&gt;&amp;quot;The Description About The Image/Slide&amp;quot;&lt;/p&gt; &lt;/div&gt; &lt;div class="slide" id="slide-3"&gt; &lt;img src="images/slider/1.jpg" alt="The Image Description" /&gt; &lt;p class="slide-text"&gt;&amp;quot;The Description About The Image/Slide&amp;quot;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#slide-box{ position:relative; width:472px; height:192px; border-bottom:3px solid #fff; overflow:hidden; } .slide{ position:absolute; float:left; width:455px; overflow:hidden; border:1px solid #000; margin:8px 8px 0 8px; } .slide img{ float:left; } .slide-text{ display:block; width: 140px; height:132px; background:#ecefdc; float:left; padding: 10px 0px; } #slide-1 { left:0px; } #slide-2 { left:467px; } #slide-3 { left:934px; } </code></pre> <p>jQuery:</p> <pre><code>$('#slide-but-1').click(function(){ $('#slide-1').animate({"left": "0px"}, "slow"); $('#slide-2').animate({"left": "467px"}, "slow"); $('#slide-3').animate({"left": "934px"}, "slow"); }); $('#slide-but-2').click(function(){ $('#slide-1').animate({"left": "-467px"}, "slow"); $('#slide-2').animate({"left": "0px"}, "slow"); $('#slide-3').animate({"left": "467px"}, "slow"); }); $('#slide-but-3').click(function(){ $('#slide-1').animate({"left": "-934px"}, "slow"); $('#slide-2').animate({"left": "-467px"}, "slow"); $('#slide-3').animate({"left": "0px"}, "slow"); }); </code></pre>
 

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