homepage Welcome to WebmasterWorld Guest from 54.167.138.53
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
andrewsmd




msg:4523093
 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
$(container.children()[0]).slideDown("slow");

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();
hiddenDivs.push(removedDiv);
divs = container.children();
}

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

};

function roll(settings, container) {
//Dom manipulation.
container.prepend(hiddenDivs.pop());
hiddenDivs.unshift($(container.children()[settings.visible]).remove());

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

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


HTML


<!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">
<head>
<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 {
width:400px;
}

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

.box_size {
padding:10px;
}

.external_link{
color: green;
font-size:20px;
}

</style>

</head>
<body>

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

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


</body>
</html>

 

daveVk




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

You call hide() prior to animate() ?

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

andrewsmd




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

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

daveVk




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

[api.jquery.com...]

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