Остановить анимацию, если состояние зависания

Question

У меня есть анимация нижнего колонтитула, которая оживляет открытую, задерживает 5 секунд, а затем приближается. Я хотел бы остановить анимацию, которая закрывается, если мышь, если над нижним колонтитулом.

Вот код:

if(jQuery('body').hasClass('page-template-template-home')){ 
    jQuery('footer').animate({ 
      'bottom': '0px' 
    }, timein).addClass('footer-show').delay('5000'); 
    footeranimate(); 
    fix = true; 
} 

Мне нужно, чтобы остановить footeranimate() если колонтитула время парили дальше, или же запустить анимировать близко.

Вот функция footeranimate:

function footeranimate(){ 
    if (jQuery('footer').hasClass('footer-show')) { 
     var footerHeight = jQuery('footer').outerHeight(); 
     jQuery('footer').animate({ 
      'bottom': '-' + footerHeight + 'px' 
     }, timein).removeClass('footer-show'); 
     move_footer_up(); 
    } else { 
     jQuery('footer').animate({ 
      'bottom': '0px' 
     }, timein).addClass('footer-show'); 
    } 
} 

HTML-:

<footer> 
<div class="col-sm-12" id="footer-shape"> 
    <div id="open-work"> 
     <span>Our Work</span> 
    </div> 
    <svg width='100%' viewBox="0,0 1600,900" preserveAspectRation="xMinYMin meet"> 
     <polygon fill="black" points="0,133 1600,0 1600,900 0,900"/> 
    </svg> 
</div> 
<div class="container-fluid" id="inner-footer-feature"> 
    <div class="container"> 
     <div class="row"> 

<div class="col-sm-3"> 

</div> 

<div class="col-sm-3"> 

</div> 

    <div class="col-sm-3"> 

</div> 

    <div class="col-sm-3"> 

</div> 



</div> 
    </div>     
</div> 
</footer> 

Answer 1

попробуйте этот код

var timein = 1000; 
 

 
$(document).ready(function(){ 
 
    $('footer').on('mousemove' , function(){ 
 
     if (!jQuery('footer').hasClass('footer-show')){ 
 
     jQuery('footer').stop().animate({ 
 
      'bottom': '0px' 
 
     }, timein).addClass('footer-show'); 
 
     } 
 
    }).on('mouseout blur',function(){ 
 
     if (jQuery('footer').hasClass('footer-show')){ 
 
     var footerHeight = jQuery('footer').outerHeight() - 20; 
 
     jQuery('footer').stop().animate({ 
 
      'bottom': '-' + footerHeight + 'px' 
 
     }, timein).removeClass('footer-show'); 
 
     //move_footer_up(); 
 
     } 
 
    \t \t 
 
    }); 
 
});

footer{ 
 
    height : 150px; 
 
    background : #373737; 
 
    position : absolute; 
 
    bottom : -130px; 
 
    width : 100%; 
 
} 
 
footer > div{ 
 
    color: #fff; 
 
    text-align : right; 
 
    padding : 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<footer> 
 
    <div>Close</div> 
 
</footer>