Javascript jquery动画与响应问题

我已经为我的问题创建了一个解决方案

问题1-快速鼠标移动时，有时动画不会恢复。要看到这一点，请使用Lorem Ipsum快速悬停在黑色方块上

第2期-在手机分辨率下，动画div在悬停div下方滑动，然后跳入右边缘的位置。它应该像在大屏幕上一样滑动。我怀疑这可能是一个CSS问题，但不是100%确定

相关jquery

// product hover slide left
$(document).ready(function() {
    $('.double-square .right').hide();

    //hover over left to slide content to right
    $('.double-square .left').hover(function(){
        // Set the effect type
        var effect = 'slide';

        // Set the options for the effect type chosen
        var options = { direction: 'left' };

        // Set the duration (default: 400 milliseconds)
        var duration = 350;

        $(this).siblings('.right').toggle(effect, options, duration);
    });

});

// set line height of h4 to height of containing div
$(window).load(function() {
    var divHeight = $('.left').height();

    $('.left h4').css('line-height', divHeight + 'px');
});

相关html

<div class="col-xs-6 double-square">
  <img src="http://lorempixel.com/545/270/people" alt="" class="img-responsive">
  <div class="row">
  <div class="pos-ab">
      <div class="col-xs-6 left">
        <div>
          <h4>Lorem ipsum</h4>
        </div>
      </div>

      <div class="col-sm-6 right">
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo deleniti unde possimus maxime facere deserunt.</p>
        </div>
      </div><!--right-->
  </div><!--pos-ab-->
  </div><!--row-->
</div><!--double square-->

<div class="col-xs-6 double-square">
  <img src="http://lorempixel.com/545/270/people" alt="" class="img-responsive">
  <div class="row">
  <div class="pos-ab">
      <div class="col-xs-6 left">
        <div>
          <h4>Lorem ipsum  <span>&gt;</span></h4>
        </div>
      </div>

      <div class="col-sm-6 right">
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo deleniti unde possimus maxime facere deserunt.</p>
        </div>
      </div><!--right-->
  </div><!--pos-ab-->
  </div><!--row-->
</div><!--double square-->

---

最终发生的情况是，如果用户速度很快，他们会在幻灯片动画完成之前将鼠标移出。因为您没有停止该动画，它将继续并扰乱您的状态

通常你可以这样做：

                          // stop existing before continuing
$(this).siblings('.right').stop().toggle(effect, options, duration);

但您不能，因为您使用的是jqueryui。jQuery ui效果不在正常动画队列中。恐怕你被这件事搞砸了。如果您在没有jqueryui的情况下制作了与标准jQuery动画相同的动画，那么上面的代码将为您节省时间

---

或者你可以通过css3转换，然后浏览器将为你管理状态。

为了避免投票失败/关闭，我建议你至少在这里发布相关的JS。也就是说，你提供了一个关于这个问题的工作示例+1@basic-已将相关代码添加到question@CreateSean你回答了吗？