时间戳

首页 > 解决方案 > 如何在javascript中应用Css转换延迟属性在一定时间后更改图像

javascript - 如何在javascript中应用Css转换延迟属性在一定时间后更改图像

问题描述

在这里，我正在尝试使用其 id 选择图像并在 5 秒后更改图像，但是转换延迟不起作用是否有什么我做错了什么可以让我知道，因为我觉得这是一个重要的问题不一个曾经费心问 

var b1=document.querySelector("#bubbles");
   b1.src="https://steemitimages.com/DQmaC34qT4WKoUd9A1X91XjGVRbCYEJZooCJxwshpvjvpnU/3676223822_713fe300a6_b.jpg";
   
    b1.style.transitionDelay="5s";
    
    b1.src="http://earthwidetribe.com/wp-content/uploads/2014/10/popping-bubble.jpg";
    
     b1.style.transitionDelay="5s";
     
   b1.src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-wGqzB-SJZnFzXoKnSRjRK5IDLgYY43GpLG1FXj5uvgivbMtT";
<img id="bubbles"/>

标签： javascriptjquery

解决方案

transitionDelay 只会延迟元素的显示。您的代码将同时运行，因此最后一个 transitionDelay 和 src 将应用于元素。

改为这样做：

var b1 = document.querySelector("#bubbles");
b1.src = "https://steemitimages.com/DQmaC34qT4WKoUd9A1X91XjGVRbCYEJZooCJxwshpvjvpnU/3676223822_713fe300a6_b.jpg";

setTimeout(function() {
  b1.src = "http://earthwidetribe.com/wp-content/uploads/2014/10/popping-bubble.jpg";

  setTimeout(function() {
    b1.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-wGqzB-SJZnFzXoKnSRjRK5IDLgYY43GpLG1FXj5uvgivbMtT";
  }, 5000);
}, 5000);
<img id="bubbles" />

推荐阅读