title: Hover with jQuery cycle : go next then pause
body: <p>I'm trying to make a cycle div. The wanted final effect is : being able to click on div1 to see div 2. Being able to click div 2 to see div 1 again. Being able to also do this with only keyboard ==> this is done and working.</p>
  
  <p>But the second part of my goal is giving my problems. 
  Basically I want this : when I hover div1, the slide go to div2. But <strong>it has to stop sliding immediately</strong>. <strong>It must go back to div 1 when the hover is ended.</strong></p>
  
  <p>Here is what I tried but doesnt work :</p>
  
  <pre><code>$(document).ready(function() {
  
      $('#s1').cycle({ 
          fx:     'slideY', 
          speed:  300, 
          next:   '#s1', 
          timeout: 0,
          after: function (curr, next) {
              $(next).find('.goto').focus();
          }
      });
  
      var cycleConfigured = false;
  
      $('#s1').hover(
          function() {
              if(cycleConfigured)
                  $(this).cycle('resume');
              else
              {
                  $(this).cycle({
                      fx:     'fade',
                      speed:   600,
                      timeout: 300,
                      slideResize: false,
                      pause:   0,
                      after:  function() {
                          $(this).cycle('pause');
                      }
                  });
                  cycleConfigured = true;
              }
          },
         function(){
              $(this).cycle('pause');
          }
      ).trigger('hover');
  });
  </code></pre>
  
  <p>jsfiddle <a href="http://jsfiddle.net/gy8p5ewv/3/" rel="nofollow">http://jsfiddle.net/gy8p5ewv/3/</a></p>
  
  <p>basically as you can see, when I hover the div, it starts sliding and I cant stop it. </p>
  
  <p>To sump up, here is the wanted effect I cant reach :</p>
  
  <p><strong>on hover container div > go div 2 permanently</strong></p>
  
  <p><strong>on leaving hover container div > go back to div 1 permanently</strong></p>
  
  <p>documentation : <a href="http://jquery.malsup.com/cycle/options.html" rel="nofollow">http://jquery.malsup.com/cycle/options.html</a></p>