jquery - показать/скрыть элементы + контролировать индивидуальное время для каждого элемента

Я пытаюсь показать и скрыть элементы, вроде слайд-шоу, но я хочу контролировать, как долго каждый отдельный элемент отображается. Я также не хочу, чтобы элементы затухали или выходили, но просто появляются сразу после того, как предыдущий элемент был скрыт. Попробуйте изобразить кредиты после телешоу или что-то в этом роде, но каждый элемент может быть индивидуально синхронизирован. Как я могу достичь этого с тем, что у меня есть до сих пор?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>

источник

2012-04-18 Ryan

Где вопрос? – gdoron

Я должен был догадаться, что именно вы хотите, но я думаю, что это является то, что вы ищете:

$('#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-18 03:15:06 magzalez

jquery - показать/скрыть элементы + контролировать индивидуальное время для каждого элемента

ответ

Смежные вопросы