![](/img/trans.png)
[英]element.classList.addClass is not a function when testing Animate.css
[英]JavaScript: addClass when element is in viewport using animate.css
我正在使用animate.css,因为我是一个初学者,它很好而且很简单。 我可以使动画正常工作,并可以以animation-duration: 3s
和animation-delay: 0s;
但是当我向下滚动到视口时,我找不到如何触发它。 这是到目前为止我尝试过的代码:
<div class="about-container">
<p>Content here...</p>
</div>
.about-container{
background-color: #a3c17f;
width: 500px;
height:500px;
margin: 0 auto;
}
$(function() {
if ($("#about-container").length > 0) {
addClass('animated pulse')
}
});
</script>
看你的元素。 您正在使用课程。 所以应该是$('。about-container')。 但是,您可以将其更改为ID。
$(function() {
if($('#about-container').length > 0) { // check if there's an element
$('#about-container').addClass('animated pulse'); // this is how you add class in jquery
}
});
纯Javascript
var abtContainer = document.getElementById('about-container');
if(abtContainer.length > 0) {
abtContainer.classList.add('animated pulse');
}
但是,此方法不适用于IE8及更低版本。
因此,如果支持旧版浏览器,则需要使用此功能。
abtContainer.className += ' animated pulse';
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
尝试这个
jQuery('.row.homeCats').addClass("hideme").viewportChecker({
classToAdd: 'visible animated fadeInDown',
});
从您的代码看来,您正在添加addClass('animated pulse')。 由于addClass支持多个类,因此您的代码是正确的。 为了测试您的代码,您可以尝试以这种方式应用类.addClass('animated').addClass('pulse'); 但是使用$(this).addClass('animated pulse')来将类附加到'.about-container'DIV。
在给定的HTML DIV中,您没有ID#about-container,因此请替换,
$(function() {
if ($(".about-container").length > 0) {
$(this).addClass('animated pulse'); // Add class supports multiple class
//OR
$(this).addClass('animated'). addClass('animated'); // But try this also
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.