Can I use a div to animate the container it is in?
I have a container with three sections of content inside it. I am using javascript to navigate from left to right through sections using navigation tools that are referenced as an unordered list. Instead, I would like to make these divs fixed and just move the entire container from left to right using the same navigation buttons.
Here is the javascript I've tried. To make it work, I tried to change var $ anchor = $ (this) to var $ anchor = $ (div container name), but that doesn't work. Can anyone help me with this? Thanks to
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
+3
source to share
1 answer
Thanks ... I found my answer though!
$(document).ready(function(){
$("#right").click(function(){
$("#contents").animate({left:'-200px'},500);
$("#container").animate({'margin-left':'200px'},500);
});
$("#left").click(function(){
$("#contents").animate({left:'0px'},500);
$("#container").animate({'margin-left':'0px'},500);
});
});
+2
source to share