html – 具有长持续时间问题的CSS过渡宽度位置

概述假设我们想要宽度/位置的过渡 当使用较长的持续时间时,会出现不希望的行为,因为定时功能将从零开始执行其余 *** 作 #test { border: solid 1px; width: 100px; height: 50px; transition: width 10s linear; } #test:hover { width: 假设我们想要宽度/位置的过渡

当使用较长的持续时间时,会出现不希望的行为,因为定时功能将从零开始执行其余 *** 作

#test {      border: solID 1px;      wIDth: 100px;      height: 50px;      Transition: wIDth 10s linear;    }    #test:hover {      wIDth: 1000px;      Transition: wIDth 10s linear;    }

<div ID="test"></div>

在过渡期间在任何地方重新移动div时,在中间它将进行超过10秒的转换,但对于500px而不是原始设置,更糟糕的是,最后10px需要10s.

任何解决方法或我应该使用jquery动画功能？

解决方法 如果您不介意动画脚本,这是一个解决方案.
基本上,您必须知道剩下的时间来覆盖剩余的宽度.

当然,您可以将此函数用于任何元素,也可以传递所需的宽度,但这不在此范围内.

$("#test").on("mouSEOver",function(){  var $el = $(this);    var time = 10000 - $el.wIDth()*10; // This is the actual remaining animation time  $el.stop().animate({"wIDth": "1000px"},time,"linear");});$("#test").on("mouSEOut",function(){  var $el = $(this);  var time = $el.wIDth()*10; // This is the actual remaining animation time    $el.stop().animate({"wIDth": "100px"},"linear");});

#test {  border: solID 1px;  wIDth: 100px;  height: 50px;}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.7.2/jquery.min.Js"></script><div ID="test"></div>

总结

以上是内存溢出为你收集整理的html – 具有长持续时间问题的CSS过渡宽度/位置全部内容，希望文章能够帮你解决html – 具有长持续时间问题的CSS过渡宽度/位置所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。