个人中心
gpt4 book ai didi

javascript - Animate.css 库到等效的 jquery 代码以在 IE 上工作

转载 作者：太空宇宙 更新时间：2023-11-04 12:57:12 26 4
gpt4 key购买 nike

我已经使用 ( Animate.CSS ) 实现了一个成功的 slider ，但它使用的是 CSS 3 并且在 IE 中效果不佳或根本不工作，所以我认为我们可以使用 JavaScript/Jquery 来制作动画，就像Animate.CSS 提供的...

我该如何实现？

最佳答案

Animate.css 使用仅适用于 IE10+ 的 @keyframe。 transition CSS 属性也不起作用。

http://caniuse.com/#search=keyframe

http://caniuse.com/#search=transition

您将不得不使用 jQuery animate() 方法。

文档链接:

http://api.jquery.com/animate/

使用 @keyframes 制作的动画看起来会好很多，因为您设置了动画的每一帧。但是在IE9以下就不行了，没办法。您应该使用 jQuery animate() 方法。

看一个很好的例子:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 200px;
    height: 1.1em;
    text-align: center;
    border: 2px solid green;
    margin: 3px;
    font-size: 14px;
  }
  button {
    font-size: 14px;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>
<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>

<script>
$( "#go1" ).click(function() {
  $( "#block1" )
    .animate({
      width: "90%"
    }, {
      queue: false,
      duration: 3000
    })
    .animate({ fontSize: "24px" }, 1500 )
    .animate({ borderRightWidth: "15px" }, 1500 );
});

$( "#go2" ).click(function() {
  $( "#block2" )
    .animate({ width: "90%" }, 1000 )
    .animate({ fontSize: "24px" }, 1000 )
    .animate({ borderLeftWidth: "15px" }, 1000 );
});

$( "#go3" ).click(function() {
  $( "#go1" ).add( "#go2" ).click();
});

$( "#go4" ).click(function() {
  $( "div" ).css({
    width: "",
    fontSize: "",
    borderWidth: ""
  });
});
</script>

</body>
</html>

关于javascript - Animate.css 库到等效的 jquery 代码以在 IE 上工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25728590/

26 4 0
文章推荐： java - 如何使用转向功能来转向Finch机器人？
文章推荐： 在对象之前打印的 C++ 无意义对象
文章推荐： java - 如何使用 ReportNG 在 selenium webdriver 中截取失败测试的屏幕截图
文章推荐： java - 递归更改每个目录下的所有单词出现
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com