Question

我在动画导航栏时遇到问题。

请找到上面的代码。当我向下滚动时，它运行良好，但是当我回来时，css值未按照javascript中的指定进行分配。请帮助我。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<style>
.positioned {
    position: fixed;
    top: 40px;
    left: 15px;
  width:100%;
}
.content{
  height:1200px;
}



/* Just cosmetic stuff */

body {
    font-family: arial;
    font-size: 14px;
    height:1200px;
}

div {
    background: #fafafa;
    border: 1px solid #777;
    padding: 5px;
}

.positioned {
    background: #e1eef5;
}
</style>
<div class="navbar">
</div>

<div class="positioned">
    position: fixed; bottom: 10px; left: 15px;
</div>

<div class="content">

</div>
<script type="text/javascript">
    $(window).scroll(function() {
    if ($(window).scrollTop() >= 250) {
        $('.positioned').animate({
          backgroundColor: "red",
          height: '300px'},1000);
    } else { 
        $('#box').css('display', 'block');
        $('.positioned').css("background-color", "yellow");
        // var rowNavbar = $('.row-navbar');
        // $('.row-navbar').animate({
        //   height: '130px'},1000);
    }
});
</script>

Answer 1

如果在同一元素上调用多个动画方法（滚动的次数），则后面的动画将放置在元素的效果队列中。这些动画直到第一个动画完成才会开始。调用.stop（）时，队列中的下一个动画立即开始

$(window).scroll(function() {
if ($(window).scrollTop() >= 250) {
    $('.positioned').stop().animate({
      backgroundColor: "red",
      height: '300px'},1000);
} else { 
   $('.positioned').stop().animate({
     display:'block',
      backgroundColor: "yellow"
      },1000);
}
});

style属性覆盖了使用jquery

1 个答案: