使用Jquery动画进行简单的css更改

Using Jquery animate for simple css changes

本文关键字：css 更改 简单 Jquery 动画 使用      更新时间：2023-09-26

我想用.animate而不是.css来做这件事。当我把它改为animate时，它会出现故障，无法正常工作

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop != 0) {
    $('#test_box').css({
      "background-color": "red",
      "height": '400px'
    });
  } else {
    $('#test_box').css({
      "background-color": "blue",
      "height": "200px"
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test_box" style="height: 200px; width: 200px; background-color: red;"></div>

对于增加div高度和减少div高度的动画效果，请使用

transition: height 2s;

这样可以使过渡平稳。

这是一把可能有用的小提琴。

Fiddle

--帮助：）

以下带有background-color动画的代码只有在还包括jQuery-UI库的情况下才能工作（仅用于颜色效果）

$(window).scroll(function() {
      var scrollTop = $(window).scrollTop();
      if (scrollTop != 0) {
        $('#test_box').animate({
          "background-color": "red",
          "height": '400px'
        },500);
      } else {
        $('#test_box').animate({
          "background-color": "blue",
          "height": "200px"
        },500);
      }
    });

.animate（）方法允许我们在任何数字CSS属性上创建动画效果。查看更多参考资料http://api.jquery.com/animate/

它不会改变背景颜色。

示例：这里只有height&width属性正在更改。。

代码已更新。。使用jqueryui，颜色也会改变。。。

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop != 0) {
    $('#test_box').animate({
      "background-color": "red",
      "height": '1500px',
      "width": '200px'
    });
  } else {
    $('#test_box').animate({
      "background-color": "blue",
      "height": "700px",
      "width": '500px'
    });
  }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="test_box" style="height: 900px; width: 200px; background-color: red;"></div>

要使动画良好工作，必须增加div的高。因为如果页面可以滚动，CCD_ 4将起作用。

小提琴示例

您需要一个额外的库来支持jQuery的颜色动画。这个看起来很不错：

  • http://www.bitstorm.org/jquery/color-animation/

为了使动画顺利运行，您可能需要使用.stop(true, false)函数清除队列。

$(window).scroll(function() {
    var cssObj = $(window).scrollTop() === 0 ? {
            backgroundColor: 'blue',
            height: 200
        } : {
            backgroundColor: 'red',
            height: 400
    };
    $('#test_box').stop(true, false).animate(cssObj, {
        duration: 1000,
        easing: 'linear'
    });
});

演示

我必须说，正如其他人提到的那样，使用CSS转换更容易。只需切换一个css类就可以给#test_box一个状态，比如说"scrolled"。

$(window).scroll(function() {
    $('#test_box').toggleClass('scrolled', $(window).scrollTop() !== 0);
});
相关文章：