jquery animation & responsive issues

Question

문제점을 해결하기 위해 bootply with all the 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--> 

Answer 1

궁극적으로 무슨 일이 일어나고 있는지 사용자가 빠른 경우가 애니메이션 슬라이드가 완료 마우스 밖으로 전에이다. 당신이 그 애니메이션을 멈추지 않기 때문에, 그것은 계속해서 당신의 상태를 엉망으로 만듭니다.

일반적으로 당신은 단지 같은 것을 할 수있는 :

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

을하지만 당신은 당신의 jQuery UI를 사용 할 수 있기 때문이다. jQuery UI 효과는 일반 애니메이션 대기열에 없습니다. 그래서 너는 내가 두려워하는 이것에 망했다. 표준 jQuery 애니메이션으로 jQuery없이 동일한 애니메이션을 만든 경우 위의 코드를 사용하면 저장이됩니다.

또는 css3 전환으로 할 수 있으며 브라우저가 상태를 관리합니다.