Question

我正在尝试从此方向获取mouseenter方向和动画项目的叠加层。这在左侧和顶侧工作正常，但在底部和右侧覆盖层改变它的位置而没有动画。

这是我的代码（我正在使用materializeCSS框架）

＆＃13;

$(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);
    }
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

这是一个有趣的问题我不能解释它为什么会发生。

但我找到了简单的走动在animateReferenceHoverIn()中，动画现在仅使用top和left位置引用，并在开头使用-100%或100%，具体取决于方向。< / p>

＆＃13;

$(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);
    }
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

JS动画基于mouseenter方向

1 个答案: