Search the Community

Hello, Here's the scenario: I create e-Learning and in the past I have used simple jQuery to show and hide divs when buttons are clicked. I'm still doing this, but I'm now using TweenMax to add some nice animation. My problem is that if you click the buttons quickly in turn I get an animation build up. I would like only the last animation to finish, before the last button click animation starts. I've tried using Overwrite, but nothing seems to effect it. You may ask "But why would a user go click happy on the buttons?". But that just what some people do. Here's my jQuery and TweenMax code: var tl = new TimelineMax; $(document).ready(function() { $("#Person001_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person001, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person002_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person002, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person003_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person003, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person004_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person004, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person005_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person005, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person006_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person006, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); }); And if it helps, here is the HTML: <div class="PeopleThumbContainer" id="PeopleThumbContainer"> <div class="Person"> <a href="#" class="Person" id="Person001_btn"> <p>Janine<br /> Cost Centre Manager<br /> Capita Symonds</p> <img src="images/people/person_001.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person002_btn"> <p>Barry<br /> Web developer<br /> Capita L&D</p> <img src="images/people/person_002.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person003_btn"> <p>Reginald<br /> Consultant<br /> Capita IB Services</p> <img src="images/people/person_001.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person004_btn"> <p>Lisa<br /> Cost Centre Manager<br /> Capita Symonds</p> <img src="images/people/person_001.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person005_btn"> <p>Nigel<br /> Cost Centre Manager<br /> Capita Symonds</p> <img src="images/people/person_001.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person006_btn"> <p>Sarah<br /> Cost Centre Manager<br /> Capita Symonds</p> <img src="images/people/person_001.jpg" /></a></div> </div> <div class="PeopleContainer" id="PeopleContainer"> <div class="Introduction" id="Introduction"><a name="maincontent" id="maincontent"></a> <p>What do people like about working in Capita? What are the benefits of working for such a large organisation?</p> <p><strong>Select the employees on the right</strong> to see what they have to say about things?</p> </div> <div class="PeopleContent" id="Person001"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="PeopleContent" id="Person002"> <img src="images/people/person_002_big.png" /> <div class="text"> <p>Text 2</p> </div> </div> <div class="PeopleContent" id="Person003"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Text 3</p> </div> </div> <div class="PeopleContent" id="Person004"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Text 4</p> </div> </div> <div class="PeopleContent" id="Person005"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Text 5</p> </div> </div> <div class="PeopleContent" id="Person006"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Text 6</p> </div> </div> </div> Thanks is advance. Barry