基於mouseenter方向的JS動畫

Question

我想從這個方向獲得鼠標移動方向和動畫項目的覆蓋。這在左側和頂側很好地工作，但在底部和右側覆蓋改變它的位置沒有動畫。

這裏是我的代碼（我用materializeCSS框架）

$(document).ready(function() { 
 
    $('.reference-item').bind('mouseenter', function(e){ 
 
     var w = $(this).width(); 
 
     var h = $(this).height(); 
 
     var x = (e.pageX - this.offsetLeft - (w/2)) * (w > h ? (h/w) : 1); 
 
     var y = (e.pageY - this.offsetTop - (h/2)) * (h > w ? (w/h) : 1); 
 
     var direction = Math.round((((Math.atan2(y, x) * (180/Math.PI)) + 180)/90) + 3) % 4; 
 
     var overlay = $(this).find('.reference-overlay'); 
 

 

 

 
     switch(direction) { 
 
      case 0: 
 
       /** TOP **/ 
 
       animateReferenceHoverIn(this, 'top', '0px'); 
 
       break; 
 
      case 1: 
 
       /** RIGHT **/ 
 
       animateReferenceHoverIn(this, 'right', '0px'); 
 
       break; 
 
      case 2: 
 
       /** BOTTOM **/ 
 
       animateReferenceHoverIn(this, 'bottom', '0px'); 
 
       break; 
 
      case 3: 
 
       /** LEFT **/ 
 
       animateReferenceHoverIn(this, 'left', '0px'); 
 
       break; 
 
     } 
 
    }); 
 
}); 
 

 
function animateReferenceHoverIn(DOMelement, direction, value){ 
 
    var overlay = $(DOMelement).find('.reference-overlay'); 
 
    overlay.css('top', '0'); 
 
    overlay.css('left', '0'); 
 
    overlay.css('right', '0'); 
 
    overlay.css('bottom', '0'); 
 
    overlay.css(direction, '-100%'); 
 
    if(direction == 'left') { 
 
     overlay.stop().animate({ 
 
      left: value, 
 
     }, 500); 
 
    } 
 
    if(direction == 'right') { 
 
     overlay.stop().animate({ 
 
      right: value, 
 
     }, 500); 
 
    } 
 
    if(direction == 'top') { 
 
     overlay.stop().animate({ 
 
      top: value, 
 
     }, 500); 
 
    } 
 
    if(direction == 'bottom') { 
 
     overlay.stop().animate({ 
 
      bottom: value, 
 
     }, 500); 
 
    } 
 
}

.reference{ 
 
    background-color: #111111; 
 
} 
 

 
.reference .responsive-img{ 
 
    width: 100%; 
 
} 
 

 
.reference .row{ 
 
    margin-bottom: 0; 
 
} 
 

 
.reference h2{ 
 
    color: #fff; 
 
} 
 

 
.reference-item{ 
 
    margin: 10px 0; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.reference .reference-item > .reference-overlay{ 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
}

<section class="reference row"> 
 
      <div class="col s10 offset-s1"> 
 
       <div class="row"> 
 
        <h2 class="center">Reference</h2> 
 
        <div class="col s12 m5 reference-item"> 
 
         <img src="images/refthai2.jpg" alt="Thaiapart" class="responsive-img"> 
 
        </div> 
 
        <div class="col s12 m7 reference-item"> 
 
         <img src="images/refker.jpg" alt="Thaiapart" class="responsive-img"> 
 
        </div> 
 
        <div class="col s12 m7 reference-item"> 
 
         <img src="images/refsim.jpg" alt="SIM" class="responsive-img"> 
 
        </div> 
 
       </div> 
 
       <div class="row"> 
 
        <div class="col s12 m8 reference-item"> 
 
         <div class="reference-overlay"></div> 
 
         <img src="images/refvic.jpg" alt="SIM" class="responsive-img"> 
 
        </div> 
 
        <div class="col s12 m4 reference-item"> 
 
         <img src="images/refstkz.jpg" alt="STKZ" class="responsive-img"> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </section>

Answer 1

這是一個有趣的問題。
我無法解釋它爲什麼會發生。

但我發現了簡單的步行。
在animateReferenceHoverIn()中，動畫現在僅使用位於-100%或100%位置的top和left位置參考，具體取決於方向。

$(document).ready(function() { 
 
    $('.reference-item').bind('mouseenter', function(e){ 
 
     var w = $(this).width(); 
 
     var h = $(this).height(); 
 
     var x = (e.pageX - this.offsetLeft - (w/2)) * (w > h ? (h/w) : 1); 
 
     var y = (e.pageY - this.offsetTop - (h/2)) * (h > w ? (w/h) : 1); 
 
     var direction = Math.round((((Math.atan2(y, x) * (180/Math.PI)) + 180)/90) + 3) % 4; 
 
     var overlay = $(this).find('.reference-overlay'); 
 

 

 

 
     switch(direction) { 
 
      case 0: 
 
       /** TOP **/ 
 
       animateReferenceHoverIn(this, 'top', '0px'); 
 
       break; 
 
      case 1: 
 
       /** RIGHT **/ 
 
       animateReferenceHoverIn(this, 'right', '0px'); 
 
       break; 
 
      case 2: 
 
       /** BOTTOM **/ 
 
       animateReferenceHoverIn(this, 'bottom', '0px'); 
 
       break; 
 
      case 3: 
 
       /** LEFT **/ 
 
       animateReferenceHoverIn(this, 'left', '0px'); 
 
       break; 
 
     } 
 
    }); 
 
}); 
 

 
function animateReferenceHoverIn(DOMelement, direction, value){ 
 
    var overlay = $(DOMelement).find('.reference-overlay'); 
 
    /* 
 
    overlay.css('top', '0'); 
 
    overlay.css('left', '0'); 
 
    overlay.css('right', '0'); 
 
    overlay.css('bottom', '0'); 
 
    overlay.css(direction, '-100%'); 
 
    */ 
 
    var myHeight = overlay.height(); 
 
    if(direction == 'left') { 
 
     overlay.css("left","-100%"); 
 
     overlay.stop().animate({ 
 
      left: value, 
 
     }, 500); 
 
    } 
 
    if(direction == 'right') { 
 
     overlay.css("left","100%"); 
 
     overlay.stop().animate({ 
 
      left: value, 
 
     }, 500); 
 
    } 
 
    if(direction == 'top') { 
 
     overlay.css("top","-100%"); 
 
     overlay.stop().animate({ 
 
      top: value, 
 
     }, 500); 
 
    } 
 
    if(direction == 'bottom') { 
 
     overlay.css("top","100%"); 
 
     overlay.stop().animate({ 
 
      top: value, 
 
     }, 500); 
 
    } 
 
}

.reference{ 
 
    background-color: #111111; 
 
} 
 

 
.reference .responsive-img{ 
 
    width: 100%; 
 
} 
 

 
.reference .row{ 
 
    margin-bottom: 0; 
 
} 
 

 
.reference h2{ 
 
    color: #fff; 
 
} 
 

 
.reference-item{ 
 
    margin: 10px 0; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.reference .reference-item > .reference-overlay{ 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="reference row"> 
 
      <div class="col s10 offset-s1"> 
 
       <div class="row"> 
 
        <h2 class="center">Reference</h2> 
 
        <div class="col s12 m5 reference-item"> 
 
         <img src="images/refthai2.jpg" alt="Thaiapart" class="responsive-img"> 
 
        </div> 
 
        <div class="col s12 m7 reference-item"> 
 
         <img src="images/refker.jpg" alt="Thaiapart" class="responsive-img"> 
 
        </div> 
 
        <div class="col s12 m7 reference-item"> 
 
         <img src="images/refsim.jpg" alt="SIM" class="responsive-img"> 
 
        </div> 
 
       </div> 
 
       <div class="row"> 
 
        <div class="col s12 m8 reference-item"> 
 
         <div class="reference-overlay"></div> 
 
         <img src="images/refvic.jpg" alt="SIM" class="responsive-img"> 
 
        </div> 
 
        <div class="col s12 m4 reference-item"> 
 
         <img src="images/refstkz.jpg" alt="STKZ" class="responsive-img"> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </section>