Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Jquery Slide from right to left



2:41 am on Nov 28, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

I have a JS function that fires every 5 seconds and rotates a div. I can get the divs to do a single function like fadin or slidedown but I cannot get them to slide in from right to left. Here is the line I've tried to put .animate on but I can't seem to get it. It works when i use this

but when I try
$(container.children()[0]).animate({ "left": "400px" }, "slow");

I get nothing. here is my full code. JS file

* @author ilkinulas@gmail.com
* jquery plugin that rotates div elements inside a given div element
var hiddenDivs = [];

jQuery.fn.divroller = function(options) {
settings = jQuery.extend( {
visible : 1,
pause : 3000
}, options);

start(settings, this);

function start(settings, container) {
var divs = container.children();
//hide unvisible divs
while (settings.visible < divs.length) {
var removedDiv = $(divs[divs.length - 1]).remove();
divs = container.children();

setTimeout( function() {
roll(settings, container)
}, settings.pause);


function roll(settings, container) {
//Dom manipulation.

$(container.children()[0]).animate({ "left": "400px" }, "slow");

setTimeout( function() {
roll(settings, container)
}, settings.pause);


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.divroller.js"></script>

<style type="text/css">

#divroller_container {

.box_dark {
background-color: green;
.box_light {
background-color: red;

.box_size {

color: green;



<div id="divroller_container">
<div class="box_dark box_size" id="item1">
content 1
<div class="box_light box_size" id="item2">
content 2
<div class="box_dark box_size" id="item3">
content 3
<div class="box_light box_size" id="item4">
content 4
<div class="box_dark box_size" id="item5">
content 5
<div class="box_light box_size" id="item6">
content 6
<div class="box_light box_size" id="item7">
content 7

<script type="text/javascript">
$("#divroller_container").divroller({ pause: 3000, visible: 1 });



3:12 am on Nov 28, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

You call hide() prior to animate() ?

Try without hide() or maybe replace with show().


1:47 pm on Nov 28, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

If I remove hide, then the divs change, but they don't have any animation.


10:07 pm on Nov 28, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member


Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default.

You may need to set style="position: relative;"

Also example at above link uses left: '+=50' in animate() ?

Featured Threads

Hot Threads This Week

Hot Threads This Month