0

スライドショーのような要素を表示および非表示にしようとしていますが、個々の要素が表示される時間を制御したいと考えています。要素をフェードインまたはフェードアウトさせたくありませんが、前の要素が非表示になった直後に表示されます。テレビ番組などの後のクレジットを想像してみてください。ただし、各要素のタイミングは個別に設定できます。これまでに持っているものでこれを達成するにはどうすればよいですか?

(.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>
4

1 に答える 1

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/で動作しているのを見ることができます

于 2012-04-18T03:15:06.187 に答える