2012-04-18 18 views
0

スライドショーのような要素を表示したり非表示にしたりしようとしていますが、個々の要素の表示時間を制御したい。要素をフェードインまたはフェードアウトさせたくないのですが、前の要素が隠された直後に表示されます。テレビ番組やそのようなものの後にクレジットを描こうとするが、各要素は個別に時間を計ることができる。これまで私がこれまで達成してきたことをどのように達成することができますか?jquery - 要素を表示/非表示+各要素の時間を個別に制御する

(私は.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> 
+0

どこで働いて見ることができる質問はありますか? – gdoron

答えて

1

私はあなたが望んでいた正確に何を推測しなければならなかったが、私はこれを考えますあなたが探しているものです:

$('#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/

関連する問題