homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Jquery Slide from right to left

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

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)

You call hide() prior to animate() ?

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


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

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


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


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() ?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved