javascript - 基于鼠标输入方向的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% 的 top 和 left 位置引用制作动画或 100% 开头，具体取决于方向。

$(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>