无法正确设置动画
Can't animate properly
我做了一个简单的文本转换器,但我不知道如何正确使用 animate.css。它有效,但我希望动画延迟并且不像现在那么快。我尝试使用 .delay
但它不起作用。我对 jQuery 和动画还很陌生。
<div class="col-7 justify-content-center">
<span id="role"></div>
</div>
<script>
jQuery(function ($) {
var roles = ['role 1', 'role 2', 'role 3'];
//used to determine which is the next roles to be displayed
var counter = 0;
var $role = $('#role')
//repeat the passed function at the specified interval - it is in milliseconds
setInterval(function () {
//display the role and increment the counter to point to next role
$role.text(roles[counter++]);
//if it is the last role in the array point back to the first item
if (counter >= roles.length) {
counter = 0;
}
$role.fadeIn('slow');
$role.fadeOut('slow');
}, 4000 )
})
</script>
您可以在 .fadeOut()
之前插入 delay(whatever_number).
,如果您是这个意思的话。此外,您的 span 标签应该正确关闭(也许这只是问题中的错字 - </div>
而不是 </span>
)
jQuery(function($) {
var roles = ['role 1', 'role 2', 'role 3'];
//used to determine which is the next roles to be displayed
var counter = 0;
var $role = $('#role')
//repeat the passed function at the specified interval - it is in milliseconds
setInterval(function() {
//display the role and increment the counter to point to next role
$role.text(roles[counter++]);
//if it is the last role in the array point back to the first item
if (counter >= roles.length) {
counter = 0;
}
$role.fadeIn('slow');
$role.delay(2500).fadeOut('slow');
}, 4000)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-7 justify-content-center">
<span id="role"></span>
</div>
我做了一个简单的文本转换器,但我不知道如何正确使用 animate.css。它有效,但我希望动画延迟并且不像现在那么快。我尝试使用 .delay
但它不起作用。我对 jQuery 和动画还很陌生。
<div class="col-7 justify-content-center">
<span id="role"></div>
</div>
<script>
jQuery(function ($) {
var roles = ['role 1', 'role 2', 'role 3'];
//used to determine which is the next roles to be displayed
var counter = 0;
var $role = $('#role')
//repeat the passed function at the specified interval - it is in milliseconds
setInterval(function () {
//display the role and increment the counter to point to next role
$role.text(roles[counter++]);
//if it is the last role in the array point back to the first item
if (counter >= roles.length) {
counter = 0;
}
$role.fadeIn('slow');
$role.fadeOut('slow');
}, 4000 )
})
</script>
您可以在 .fadeOut()
之前插入 delay(whatever_number).
,如果您是这个意思的话。此外,您的 span 标签应该正确关闭(也许这只是问题中的错字 - </div>
而不是 </span>
)
jQuery(function($) {
var roles = ['role 1', 'role 2', 'role 3'];
//used to determine which is the next roles to be displayed
var counter = 0;
var $role = $('#role')
//repeat the passed function at the specified interval - it is in milliseconds
setInterval(function() {
//display the role and increment the counter to point to next role
$role.text(roles[counter++]);
//if it is the last role in the array point back to the first item
if (counter >= roles.length) {
counter = 0;
}
$role.fadeIn('slow');
$role.delay(2500).fadeOut('slow');
}, 4000)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-7 justify-content-center">
<span id="role"></span>
</div>