Question

如何更换＆＃34; hover＆＃34;用计时器之类的东西。我希望进行更改，例如在加载时或加载后2秒。

代码：

＆＃13;

body {
  background: white;
}

div.container {
  width: 60%;
  height: 1em;
  overflow: hidden;
  position: absolute;
  border-style: none;
  border-width: none;
  border-color: none;
}

div.content {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
}

div.content:hover {
  -webkit-transition: all 5s linear;
  -moz-transition: all 5s linear;
  -o-transition: all 5s linear;
  transition: all 5s linear;
  width: 500px;
  right: 0px;
  text-overflow: clip;
}

＆＃13;

<div class="container">
  <div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>

＆＃13;

Answer 1

纯CSS解决方案。您可以通过CSS动画实现此目的：

div {
  width: 100px;
  height: 100px;
  background: red;
  /* apply 2 second animation with name "grow" */
  /* with 2 second delay */
  /* and prevent resetting using forwards value */
  animation: grow 2s 2s forwards;
}

@keyframes grow {
  from { width: 100px; }
  to { width: 300px; }
}

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

针对新要求进行了更新

对于新要求，您只需要在from和to块中复制需要在动画开始时更改的属性（text-overflow: clip和right: 0）。演示：

body {
  background: white;
}

div.container {
  width: 60%;
  height: 1em;
  overflow: hidden;
  position: absolute;
  border-style: none;
  border-width: none;
  border-color: none;
}

div.content {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  /* apply 5 second animation with name "move-text" */
  /* with linear timing function and 2 second delay */
  /* and prevent resetting using forwards value */
  animation: move-text 5s linear 2s forwards;
}

@keyframes move-text {
  from {
    width: 100%;
    text-overflow: clip;
    right: 0;
  }
  to {
    width: 500px;
    text-overflow: clip;
    right: 0;
  }
}

<div class="container">
  <div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>

Answer 2

setTimeout(() => document.querySelector(".box").classList.add("grow"), 2000)

<!DOCTYPE html>
<html>

<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: red;
      -webkit-transition: width 2s;
      /* For Safari 3.1 to 6.0 */
      transition: width 2s;
    }
    
    .grow {
      width: 300px;
    }
  </style>
</head>

<body>

  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

  <div class="box"></div>

  <p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>

Answer 3

你可以这样做：

 <!DOCTYPE html>
 <html>
 <head>
 <style> 
 div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}

 my-div:hover {
width: 300px;
 }
       </style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
 setTimeout(function(){$("div").addClass("my-div")},2000);
});
</script>
  </head>
 <body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

  <div class=""></div>

 <p>Hover over the div element above, to see the transition effect.</p>

 </body>
</html>

Answer 4

你可以这样做吗

setTimeout（function（）{}，2000）

传递给setTimeout的函数将在2秒后执行

Answer 5

见内联评论：

// When the document is ready...
window.addEventListener("DOMContentLoaded", function(){
  // Wait 2000 milliseconds and run the supplied function
  setTimeout(function(){
    document.querySelector(".special").classList.add("delay");
  }, 2000);
});

.special {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

.delay {
  width: 300px;
}

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="special"></div>

Answer 6

您可以在元素上使用onmouseover事件。例如：

＆＃13;

   function hoverFunc(element) {
     setTimeout(function() {
      element.textContent = "You have unboxed me ";
     }, 2000);
   }

＆＃13;

<div onmouseover="hoverFunc(this)"> hover and unbox me </div>

＆＃13;

Answer 7

您可以使用JavaScript。

<强> HTML：

 <!DOCTYPE html>
 <html lang="en-US en">
 <head>
    <meta charset="UTF-8" />
    <title>Your Title</title>
 </head>
 <body>
     <div></div>
 </body>
 </html>

<强> CSS：

div{
   width: 100px;
   height: 100px;
   background: red;
}

<强> JavaScript的：

  window.addEventListener('load', function(){
     setTimeout(function(){
         let i = 100;
         setInterval(function(){
             if(i < 300)
               i++;
               document.getElementsByTagName('div')[0].style.width = `${i}px`;
         }, 5);
      }, 2000);
  });

在加载时而不是在悬停时更改div宽度

7 个答案:

针对新要求进行了更新