ホバー状態のアニメーションを停止する

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

は、あなたは、いくつかの `html`を持つする必要があります

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>