为什么未能将transform:none应用于我的元素

Why is this failing to apply transform:none to my elements?

本文关键字：none 应用于 我的 元素 transform 为什么      更新时间：2023-09-26

我在$(document).ready(function() { ... }); 中调用了以下内容

var serviceIcons = $('#services-row img');
for (var k = 0, n = serviceIcons.length; k < n; ++k) {
    setTimeout(function () { 
        $(serviceIcons[k]).css('transform', 'none'); 
    }, k * 50);
}

我已经验证了$('#services-row img')返回了正确的对象集，但我没有看到img上的属性style="transform:none;"应用于img s。相应的CSS是：

#services-row img { 
    transform: translateX(-10000px) translateY(-10000px); 
    transition: transform 1s; 
}

调用timeout函数时，k变量已经完成循环，并且在函数中始终等于serviceIcons.length。

要访问循环值，请使用以下语法：

setTimeout(
  function(k) {
    return function() {
      ...
    }
  }(k), k * 50
);

所以你的最终代码是：

var serviceIcons = $('#services-row img');
for(var k = 0, n = serviceIcons.length; k < n; ++k) {
  setTimeout(
    function(k) {
      return function() {
        $(serviceIcons[k]).css('transform', 'none');
      }
    }(k), k * 50
  );
}

请参阅http://brackets.clementng.me/post/24150213014/example-of-a-javascript-closure-settimeout-inside以获得对该解决方案的良好描述。

Fiddle

相关文章：