基于鼠标输入方向的JS动画答案

【问题标题】：JS animation based on mouseenter direction基于鼠标输入方向的JS动画
【发布时间】：2017-06-29 17:16:41
【问题描述】：

我正在尝试从该方向获取 mouseenter 方向并为项目的叠加层设置动画。这在左侧和顶部都可以正常工作，但在底部和右侧叠加层会改变它的位置而没有动画。

这是我的代码（我正在使用 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>

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案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>

【讨论】：