jQuery与CSS的自定义数据属性

我正在使用animate.css，现在我有一个CSS样式的animated2500这意味着它需要2.5秒的动画。风格是：jQuery与CSS的自定义数据属性

.animated2500 { 
    -webkit-animation: 2500ms ease; 
    -moz-animation: 2500ms ease; 
    -ms-animation: 2500ms ease; 
    animation: 2500ms ease; 
}

所以在我的HTML我会做：

<p class="animated2500 pulse">Takes 2.5 seconds to pulse</p>

必须有做虽然这更简单的方法，因为我会想，而无需创建一个指定多少秒自定义类每次。

有没有办法使用自定义数据属性，如：<p data-delay="5000" class="fade">Fade in 5 econds</p>会工作吗？

我怎么能做到这样的事情？

谢谢！

来源

2011-12-16 Drew

这与jQuery有什么关系？甚至JavaScript？ – 2011-12-16 16:18:52

我不知道我以为你只能通过JavaScript获取数据值的值，然后以某种方式为CSS或其他东西创建一个类。不知道这将如何工作。 – Drew 2011-12-16 16:24:17

是的，正如@ T.J.Crowder所说，这不使用任何JS。但是，你可以很容易地使用JS ... – 2011-12-16 16:24:41

我不认为你可以使用纯粹的CSS为此，个人风格是要走的路。

如果你真的想使用data-*属性，因为你已经标记了问题jquery，我会发布一个具体的jQuery的答案虽然CSS动画和数据属性是不特定的jQuery（或甚至和JavaScript）：

jQuery(function($) { 
    $(".pulse[data-delay]").each(function() { 
     var value = parseInt(this.getAttribute("data-delay"), 10); 
     if (!isNaN(value)) { 
      value = value + "ms ease"; 
      this.style["-webkit-animation"] = value; 
      this.style["-moz-animation"] = value; 
      this.style["-ms-animation"] = value; 
      this.style["animation"] = value; 
     } 
    }); 
});

它贯穿DOM准备好的元素并直接应用样式。我不喜欢它有几个原因（并非最不重要的是添加到页面后加载的新元素将得不到处理），但如果你真的，真的不想创建特定的类...

来源

2011-12-16 16:24:19

也许这样的事情会工作？（未经测试）

$(document).ready(function() { 
    $("p[data-delay]").each(function(){ 
     $(this).css('-webkit-animation',$(this).attr('data-delay')+'ms ease'); 
     $(this).css('-moz-animation',$(this).attr('data-delay')+'ms ease'); 
     $(this).css('-ms-animation',$(this).attr('data-delay')+'ms ease'); 
     $(this).css('animation',$(this).attr('data-delay')+'ms ease'); 
     } 
    ); 
});

来源

2011-12-16 16:24:13

$(document).ready(function() { 
    $("p[data-delay]").each(function(){ 
     this.style.webkitAnimationDuration = $(this).attr('data-delay') + 's'; 
    ); 
});

来源

2011-12-16 16:26:52

jQuery与CSS的自定义数据属性

回答

相关问题