Question

我试图制作简单的动画线长度反复变化。

，这是我的代码

＆＃13;

    $(document).ready(function(){
        var redline = $('.redline');
        setInterval(redmove,100)
    })
    function redmove(){
        var redline = $('.redline');
        redline.animate({'width':'500px'},2000)
        .animate({'width':'20px'},2000)
    }

＆＃13;

    .redline{
    background: red;
    height: 10px;
    width: 20px;
    }

＆＃13;

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

＆＃13;

我的代码运行良好没有问题，但是，我认为必须有更好的代码（可能更有效..等等）

所以，这是问题

1.如果此代码不好，为什么？（从效率等方面来看）

2.在这种情况下，我想知道更好的代码。

谢谢！新年快乐！

Answer 1

看看这个

@keyframes changeWidth {
        0% {
            width: 20px;
        }
        50% {
            width: 500px;
        }
        100% {
            width: 20px;
        }
    }
    
 .redline {
     height: 50px;
     background-color:red;
     animation: 4s ease-out 0s infinite changeWidth;
 }

    <div class="redline"></div>

Answer 2

您可以通过CSS处理它，如下所示：

＆＃13;

.redline {
  height: 10px;
  width: 20px;
  background: red;
  -webkit-animation-name: test_animation; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
  animation-name: test_animation;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes test_animation {
  0% {
    width: 20px;
  }
  50% {
    width: 500px;
  }
  100% {
    width: 20px;
  }
}

/* Standard syntax */
@keyframes test_animation {
  0% {
    width: 20px;
  }
  50% {
    width: 500px;
  }
  100% {
    width: 20px;
  }
}

＆＃13;

<div class="redline"></div>

＆＃13;

Answer 3

您可以使用简单的CSS @keyframe动画，如下所示：

.redline {
	background: red;
	height: 10px;
	width: 20px;
	animation-name: animateLine;
	animation-duration: 2s;
	animation-fill-mode: ease-in;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}

@keyframes animateLine {
	0% {
		width: 20px;
	}
	50% {
		width: 500px;
	}
	100% {
		width: 20px;
	}
}

<div class="redline"></div>

注意:: - 您可以使用autoprefixer为CSS添加前缀，还可以使用animate简写来减少css代码。

用更好的方式用jquery重复动画代码

3 个答案: