Move div with Jquery

Printable View

I use this script to create a simple horizontal animate scroll. But i need move div #logo with the body....

I try

Code JavaScript:

$('#logo').animate({left:"+="+500},1000);

but don´t work.....

Code JavaScript:

$(document).ready(function() {
 var margin = 0;
 var width  = $('body').width();
 
   $('#next').click(function(event) {
        event.preventDefault();
	margin +=width;
        $('html, body').stop().animate({scrollLeft:"+="+500},1000);
		$("#prev a").css('visibility','visible');
    });
    $('#prev').click(function(event) {
	event.preventDefault();
	margin -=width;
        $('html, body').stop().animate({scrollLeft:"-="+500},1000);
	if(margin<100){$("#prev a").css('visibility','hidden');}
    });
});

Anyone can help me??

Apr 14, 2011, 12:23
bsmbahamas

a wild guess but i think this line:

$('#logo').animate({left:"+="+500},1000);

should be written as:

$('#logo').animate({left:"+=500"},1000);
Apr 14, 2011, 12:48
deadinfection

I tried $('#logo').animate({left:"+=500"},1000); but did not work
Apr 14, 2011, 14:28
bsmbahamas

with this html code i am able to animate the #logo div...

make sure you are including the jquery code, and i think you also
need to specify the #logo div as position:relative or position:absolute before
jquery would be able to move the element.

hope this helps

Code:

<!DOCTYPE html> <head> <style type="text/css"> #logo { position: relative; } </style> </head> <body> <div id="logo">logo</div> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script> $(document).ready(function(){ $('#logo').animate({left:"+=500"},1000); }); </script> </body> </html>
Apr 14, 2011, 14:54
deadinfection

you are right, the code work. The div #logo was float:left, changing to position:relative the code works...

Thanks :)
Apr 14, 2011, 18:03
bsmbahamas

no prob, glad i could be of assistance.