Jquery .Animate Width Problem.
- by smoop
Thanks in advance for any-help with this, I'll try and explain it well.
I have a container of 1000px width and 220px height, in this I will have three columns 220px in height but with different widths (77px, 200px and 300px). When you click one div it will open to a fixed size (the same for each, say 400px) and the others which are not clicked will shrink back to their original sizes (77px, 200px and 300px). Like an accordian with different widths..
My jquery is getting there but not quite, I know how to create an Event on click, I know from there I need to shrink everything but the one I clicked back to their orignal size. I finish but making the one clicked expand to the size it needs to be.
jsfiddle here!
$(document).ready(function(){
// Your code here
$('.section').click(function() {
$('.section').not(this).animate({width:"77px"},400);
//alert('clicked!');
$(this).animate({width:"400px"},400);
});
});
<div id="pictureNavContainer">
<div class="section pictureSectionOne" id="1"></div>
<div class="section pictureSectionTwo" id="2"></div>
<div class="section pictureSectionThree" id="3"></div>
</div>
<style>
#pictureNavContainer{background-color:#262626; width:1000px; height:220px; overflow:hidden;}
.pictureSectionOne{float:left; background:yellow; height:220px; width:77px;}
.pictureSectionTwo{float:left; background:red; height:220px; width:177px;}
.pictureSectionThree{float:left; background:blue; height:220px; width:400px;}
</style>
I figured a kind of solution:
<script>
$(document).ready(function(){
// Your code here
$('.section').click(function() {
$('#1').animate({width:"50px"},400);
$('#2').animate({width:"100px"},400);
$('#3').animate({width:"200px"},400);
//alert('clicked!');
$(this).animate({width:"400px"},400);
});
});
</script>
But the code isnt very good.. but it works
This:
$(function(){
var $sections = $('.section');
var orgWidth = [];
var animate = function() {
var $this = $(this);
$sections.not($this).each(function(){
var $section = $(this),
org = orgWidth[$section.index()];
$section.animate({
width: org
}, 400);
});
$this.animate({
width: 400
}, 400);
};
$sections.each(function(){
var $this = $(this);
orgWidth.push($this.width());
$this.click(animate);
});
});
