Databases
StackOverflow2013
Postsdbo
POCan't move element to end at right time
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't move element to end at right time
    text
    copied!<p>I am using jquery to slide images left inside a div set to hide overflows, and then remove the first image and append it to the end, so that I always have the same number of images in the list and they keep sliding left each time the function fires:</p> <pre><code>function xxx(){ var first = $('.ximg:first'); $('.ximg').animate({ left: '-=200'}, 2000, function(){ $('.ximg').css({left: '0'}); first.insertAfter($('.ximg:last'));}); } setInterval(function(){ xxx () }, 8000); &lt;div style="position:relative; overflow:hidden; width: 400px; height: 150px;"&gt; &lt;div class="ximg" style="position: relative; width: 200px; min-height:150px; background:red"&gt;&lt;/div&gt; &lt;div class="ximg" style="position: relative; width: 200px; min-height:150px; background:orange"&gt;&lt;/div&gt; &lt;div class="ximg" style="position: relative; width: 200px; min-height:150px; background:green"&gt;&lt;/div&gt; &lt;div class="ximg" style="position: relative; width: 200px; min-height:150px; background:yelow"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>But I only end up with 1 image in the container, the second only gets added when the function fires. I know there are read made plugins to do this kind of thing but I want it simple and prefer to try and write my own even thought I am relatively new with jquery !</p> <p><a href="http://jsfiddle.net/rgct2/6/" rel="nofollow">http://jsfiddle.net/rgct2/6/</a></p> <p>The container is 400 wide and as each div is 200 wide, there should always be 2 divs in view, even during animation when it will show a % of the first and 3rd divs.</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