I'm lost with Deferred and loops, Please help to find myself

I'm lost with Deferred and loops, Please help to find myself

Hi there!

I'm getting mad about this, I was searching for a answer 2 hours but i can't find anything.

The Plan:

I have 4 DIV, each one has 100px width. When you click one, it turns to 200px i.e., the following DIV gets de property "left" to -100px to cover it. Then an animation starts, discovering the rest of the DIV clicked.

I could handle it nicely, the problem cames when you click in other DIV. To make it smart, I tried to:
1.- The following DIV's of the open one animates their "left" property to -100px with a "for" loop
2.- The open DIV changes it's width to 100px again
3.- Then the opening function I've explained before starts

When jQuery fires this function, make everything synchronously so the animation progress starts not being pushed by the 100px exceed of the opened DIV cause it in fact already has 100px, not 200.

I tried to use Deferred() on that, but I can't handle it.
If I define var deferred=$.Deferred() on the top of the script and deferred.resolve() just before the loop ends, then "deferred" is resolved the very first, just before anything get load.
If I do it in closing function, it isn't never read, keeping the open DIV on 200px
If I define "deferred" on a document.ready function, it get stuck

the code is here:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6. <style>
  7. #container { height:100px; background-color:#666; padding: 50px 100px;}
  8. .part {width:100px; height:100px; background-color:#09F; float:left; border-left:2px solid #FFF; position:relative;}
  9. </style>

  11. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  12. <script>
  13. var nowWidth=0;
  14. var posOpen=0;
  15. var nxtOpen=0;
  16. var pos=0;
  17. var isOpen=false;

  19. $(document).ready(start)

  21. function checkOpen () {
  22. for (i=1;i<=4;i++) {
  23. nowWidth=$('#container div:nth-child('+i+')').width()
  24. if(nowWidth!=100){ posOpen=i
  25. isOpen=true
  26. i=5
  27. }else{
  28. isOpen=false
  29. }
  30. }
  31. }

  33. function closeSection () {
  34. nxtOpen=posOpen+1 //cause nth-child starts with 1
  35. if (isOpen){
  36. for (y=nxtOpen;y<=4;y++){
  37. $('#container div:nth-child('+y+')').animate({left:'-100px'},2000,'linear') $('#container div:nth-child('+y+')').css('left','0px')
  38. }
  39. $('#container div:nth-child('+posOpen+')').css('width','100px')
  40. }
  41. }

  44. function clearSection () {
  45. alert('clearSection')
  46. $('#contenido article:nth-child('+(posOpen+1)+')').css('width','100px')
  47. }


  50. function openSection(pos){
  51. $('#container div:nth-child('+pos+')').css('width','200px')
  52. //Loop which covers opened DIV
  53. for (i=(pos+1);i<=4;i++) {
  54. $('#container div:nth-child('+i+')').css('left','-100px')
  55. }
  56. //Loop which returns to 0 the covering DIV's
  57. for (i=(pos+1);i<=4;i++) {
  58. $('#container div:nth-child('+(i)+')').animate({left:'0px'},2000,'linear')
  59. }
  60. }
  61. function expander(){
  62. checkOpen()
  63. closeSection()
  64. openSection($(this).index()+1)
  66. }

  68. function start(){
  69. $('.part').click(expander)
  70. }

  72. </script>

  74. </head>

  76. <body>
  77. <div id="container">
  78. <div class="part"></div>
  79.     <div class="part"></div>
  80.     <div class="part"></div>
  81.     <div class="part"></div>
  82. </div>


  85. </body>
  86. </html>