title: Animate down every other element
body: <p>So basically I have two elements that on click animate (they get bigger) and start to rotate. </p>
  
  <p>Problem is that after clicking the other one, I want the previous, to go back to it's original state. I can stop it, but I can't "animate it down" to it's original state. any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.box').hover(function(){
   $('.box').removeClass('grey')
  });
  
      $('.box').on('click',function(event){
      $('.hex-ring1,.hex-ring2,.hex-ring3').stop();
      $(this).animate({top:'30px',height:'+=100px',width:'+=20px'}, 1000);
      $(this).children('img').animate({width:'+=20px',height:'+=20px'},1000)
      $(this).children('.hex-ring1').rotate({ startDeg:7,duration:1,count:99999,forceJS:true });
      $(this).children('.hex-ring2').rotate({ startDeg:45,duration:3,count:99999,forceJS:true  });
      $(this).children('.hex-ring3').rotate({ startDeg:90,duration:5,count:99999, forceJS:true });
  
  });
  
  
  
  
  
  /*
  jQuery-Rotate-Plugin v0.2 by anatol.at
  http://jsfiddle.net/Anatol/T6kDR/
  */
  $.fn.rotate=function(options) {
    var $this=$(this), prefixes, opts, wait4css=0;
    prefixes=['-Webkit-', '-Moz-', '-O-', '-ms-', ''];
    opts=$.extend({
      startDeg: false,
      endDeg: 360,
      duration: 1,
      count: 1,
      easing: 'linear',
      animate: {},
      forceJS: false
    }, options);
  
    function supports(prop) {
      var can=false, style=document.createElement('div').style;
      $.each(prefixes, function(i, prefix) {
        if (style[prefix.replace(/\-/g, '')+prop]==='') {
          can=true;
        }
      });
      return can;
    }
  
    function prefixed(prop, value) {
      var css={};
      if (!supports.transform) {
        return css;
      }
      $.each(prefixes, function(i, prefix) {
        css[prefix.toLowerCase()+prop]=value || '';
      });
      return css;
    }
  
    function generateFilter(deg) {
      var rot, cos, sin, matrix;
      if (supports.transform) {
        return '';
      }
      rot=deg&gt;=0 ? Math.PI*deg/180 : Math.PI*(360+deg)/180;
      cos=Math.cos(rot);
      sin=Math.sin(rot);
      matrix='M11='+cos+',M12='+(-sin)+',M21='+sin+',M22='+cos+',SizingMethod="auto expand"';
      return 'progid:DXImageTransform.Microsoft.Matrix('+matrix+')';
    }
  
    supports.transform=supports('Transform');
    supports.transition=supports('Transition');
  
    opts.endDeg*=opts.count;
    opts.duration*=opts.count;
  
    if (supports.transition &amp;&amp; !opts.forceJS) { // CSS-Transition
      if ((/Firefox/).test(navigator.userAgent)) {
        wait4css=(!options||!options.animate)&amp;&amp;(opts.startDeg===false||opts.startDeg&gt;=0)?0:25;
      }
      $this.queue(function(next) {
        if (opts.startDeg!==false) {
          $this.css(prefixed('transform', 'rotate('+opts.startDeg+'deg)'));
        }
        setTimeout(function() {
          $this
            .css(prefixed('transition', 'all '+opts.duration+'s '+opts.easing))
            .css(prefixed('transform', 'rotate('+opts.endDeg+'deg)'))
            .css(opts.animate);
        }, wait4css);
  
        setTimeout(function() {
          $this.css(prefixed('transition'));
          if (!opts.persist) {
            $this.css(prefixed('transform'));
          }
          next();
        }, (opts.duration*1000)-wait4css);
      });
  
    } else { // JavaScript-Animation + filter
      if (opts.startDeg===false) {
        opts.startDeg=$this.data('rotated') || 0;
      }
      opts.animate.perc=100;
  
      $this.animate(opts.animate, {
        duration: opts.duration*10000,
        easing: $.easing[opts.easing] ? opts.easing : '',
        step: function(perc, fx) {
          var deg;
          if (fx.prop==='perc') {
            deg=opts.startDeg+(opts.endDeg-opts.startDeg)*perc/100;
            $this
              .css(prefixed('transform', 'rotate('+deg+'deg)'))
              .css('filter', generateFilter(deg));
          }
        },
        complete: function() {
          if (opts.persist) {
            while (opts.endDeg&gt;=360) {
              opts.endDeg-=360;
            }
          } else {
            opts.endDeg=0;
            $this.css(prefixed('transform'));
          }
          $this.css('perc', 0).data('rotated', opts.endDeg);
        }
      });
    }
  
    return $this;
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 30px;
    background: white;
  }
  .hex-ring1{
      width: 120px;
      height: 120px;
      -webkit-transform: rotate(7deg);
      position: absolute;
      top: 10px;
      left: 10px;
  }
  .hex-ring2{
      width: 130px;
      height: 130px;
      -webkit-transform: rotate(45deg);
      position: absolute;
      top: 5px;
      left: 5px;
  }
  .hex-ring3{
    width:140px;
    height:140px;
      -webkit-transform: rotate(90deg);
          position: absolute;
  }
  .box {
    width: 140px;
    height: 200px;
    cursor: pointer;
    width: 140px;
      height: 200px;
      position:relative;
      margin-right:40px;
      float:left;
      border:thin solid red;
  }
  
  .image2 {
      position: absolute;
      width: 70px;
      height: 70px;
      left: 33px;
      top: 33px;
  }
  
  
  
  .grey {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!--&lt;div class="box grey"&gt;
  &lt;img class="image " src="http://blackflow.pl/1.png" alt="" width="120" height="120"&gt;
  &lt;img class="image2" src="http://blackflow.pl/2.png" alt="" width="120" height="120"&gt;
  &lt;/div&gt; 
  --&gt;
  
  
  
  &lt;div class="box grey" id="box1"&gt;
    &lt;img class="hex-ring1" src="http://blackflow.pl/6.svg" id="hex1" width='120' height="120"&gt;
    &lt;img class="hex-ring2"  src="http://blackflow.pl/6.svg" id="hex2" width='120' height="120"&gt;
    &lt;img class="hex-ring3"  src="http://blackflow.pl/6.svg" id="hex3" width='120' height="120"&gt;
    &lt;img class="image2" src="http://blackflow.pl/2.png" alt="" width="120" height="120"&gt;
  &lt;/div&gt;
  &lt;div class="box grey" id="box2"&gt;
    &lt;img class="hex-ring1" src="http://blackflow.pl/6.svg" id="hex4" width='120' height="120"&gt;
    &lt;img class="hex-ring2" src="http://blackflow.pl/6.svg" id="hex5" width='120' height="120"&gt;
    &lt;img class="hex-ring3" src="http://blackflow.pl/6.svg" id="hex6" width='120' height="120"&gt;
    &lt;img class="image2" src="http://blackflow.pl/2.png" alt="" width="120" height="120"&gt;
  &lt;/div&gt;
  
  &lt;!-- &lt;p class="txt"&gt;
  Donec viverra, arcu rutrum mollis placerat, odio quam malesuada lacus, nec molestie leo magna quis tortor. Vestibulum velit quam, suscipit a scelerisque id, lobortis et magna. Maecenas convallis lacus ut tellus scelerisque cursus. Maecenas nisl nisi, accumsan quis diam in, molestie pellentesque enim. Sed orci tortor, efficitur eget metus id, tincidunt porta ante. Curabitur ac augue nulla. Maecenas sit amet augue aliquet, iaculis nisl a, hendrerit ipsum. Duis vehicula orci sed nunc blandit, vel accumsan magna commodo.
  
  Nullam sed felis non felis condimentum tempor in eu ipsum. Vestibulum nec pharetra purus, quis faucibus lectus. Proin finibus blandit mi sit amet fermentum. Vivamus convallis erat quis nulla egestas commodo. Fusce fermentum arcu lacus, non varius odio vulputate vitae. Morbi aliquam accumsan velit, et pulvinar quam aliquam ac. Sed commodo non magna a sodales. In accumsan, felis ac fringilla facilisis, magna ligula dapibus dolor, vitae facilisis erat lectus sed quam. Maecenas vehicula faucibus pellentesque.
  &lt;/p&gt; --&gt;
  
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/771yps7u/8/" rel="nofollow noreferrer">https://jsfiddle.net/771yps7u/8/</a></p>