显示/隐藏元素 + 控制每个元素的单独时间

show/hide elements + control individual time for each element

本文关键字：元素 单独 时间 控制 隐藏 显示      更新时间：2023-09-26

我试图显示和隐藏元素，有点像幻灯片，但我想控制每个元素的显示时间。我也不希望元素淡入或淡出，而只是在隐藏前一个元素后立即出现。尝试在电视节目或类似的东西之后拍摄演职员表，但每个元素都可以单独计时。我如何利用我目前所拥有的来实现这一目标？

（我在使用 .delay 时遇到问题 - 它没有做我在 js 中告诉它做的事情）

<html>
<title>Untitled</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#one').delay(1000).show(0, function() { });
    $('#one').delay(3000).hide(0, function() { });
    $('#two').delay(3000).show(0, function() { });
    $('#two').delay(4000).hide(0, function() { });
    $('#three').delay(4000).show(0, function() { });
    $('#three').delay(6000).hide(0, function() { });
    $('#four').delay(6000).show(0, function() { });
    $('#four').delay(6000).hide(0, function() { });
});
</script>   
<style type="text/css" media="screen">
    body {
    margin: 0px;
    padding: 0px;
    font-family: arial, sans-serif;
    padding: 0px;
    background: #fff;
    }
#one, #two, #three, #four, #five, #six {
    position: absolute;
    top: 50px;
    left: 50px;
    display: none;
    font-size: 48px;
    font-weight: bold;
    font-family: arial, sans-serif; 
    color: #111;
}
</style>
</head>
<body>              
    <p id="one">this is text #1</p>
    <p id="two">this is text #2</p>
    <p id="three">this is text #3</p>
    <p id="four">this is text #4</p>
    <p id="five">this is text #5</p>
    <p id="six">this is text #6</p>
</body>
</html>

我不得不猜测你想要什么，但我认为这就是你要找的：

$('#one').delay(1000).show(0).delay(1000).hide(0);
$('#two').delay(2000).show(0).delay(1000).hide(0);
$('#three').delay(3000).show(0).delay(1000).hide(0);
$('#four').delay(4000).show(0).delay(1000).hide(0);
$('#five').delay(5000).show(0).delay(1000).hide(0);
$('#six').delay(6000).show(0).delay(1000).hide(0);

你可以看到它在 http://jsfiddle.net/3XnGR/工作

相关文章：