Jquery动画&响应问题

jquery animation & responsive issues

本文关键字：问题 响应 动画 Jquery      更新时间：2023-09-26

我已经创建了一个bootply与所有的html/css/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);

，但你不能，因为你使用jQuery ui。jQuery ui效果不在正常的动画队列中。所以恐怕你这次玩完了。如果您在没有jQuery ui的情况下使用标准jQuery动画制作相同的动画，上面的代码将为您节省时间。

或者你可以使用css3转换，然后浏览器会为你管理状态

相关文章：