JS animation based on mouseenter direction

Question

I am trying to get mouseenter direction and animate item's overlay from this direction. This works fine on the left and top side, but on the bottom and right side overlay changes it's position without animation.

Here is my code (I am using materializeCSS framework)

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

That is an interesting issue.
I can't explain why it occurs.

But I found the easy walk-around.
In animateReferenceHoverIn(), the animation is now made using only the top and left position reference with -100% or 100% at the beginning, depending on the direction.

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