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

试试这段代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果悬停状态则停止动画

1 个答案: