jQuery - delay text

**stan van oers** · 16-02-2011, 10:48

Beste,

Ik heb een menu animatie gemaakt. Dat zeg maar een menu groter word. Alleen nu worden de LI's in het begin niet mooi weergeven. Dus dacht ik eraan om die een delay display te geven van 2 seconden.

Maar hoe doe ik dit. Dus simpel gezegd eerst moet het menu zijn uitgeklapt en daarna pas de menu items worden weergeven.

Alvast bedankt,
Stan van Oers

**Robin L** · 16-02-2011, 10:51

Beste,

Dit helpt je vast wel verder;
http://api.jquery.com/fadeIn/

Groet,

Robin L

**stan van oers** · 16-02-2011, 10:58

Zoiets moet het zijn ja maar dan zonder de click ;) hoe doe ik dat?

**MelvinKooper** · 16-02-2011, 11:12

je kunt toch ook gewoon de '.delay(waarde) gebruiken voor je .animate?
zoals bijvoorbeeld":

Code:

.delay(1000).animate(animatie)

ps, als je een voorbeeld kunt plaatsen van je animatie, zouden we je gemakkelijker kunnen helpen.

**stan van oers** · 16-02-2011, 11:21

Ok je hebt dus eerst dat menu_middle naar links animate en daarna navigation div er pas in fade.

Code:

<html>
<body>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/slide.js" type="text/javascript"></script>
</head>

	<div id="menu_left"></div>
       	<div id="menu_middle">
        	<div id="navigation">
           	<ul>
            	<li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Our creations</a></li>
                <li><a href="#">References</a></li>
                <li><a href="#">Services</a></li>
            	<li><a href="#">Contact</a></li>
        	</ul>
            </div>
    	</div>

<script>
    	$("#menu_middle").animate( { width: "57%" }, { queue: false, duration: 2000 });
</script>
</body>
</html>

Dit is een versimpelde versie van mijn html maar denk dat hier alle informatie al in staat. Alvast bedankt iedereen!

**MelvinKooper** · 16-02-2011, 11:36

met de methode waar ik het hierboven over had, zou het als volgt zijn: voorbeeld. Ik heb hier nu een delay van 3 sec ingesteld voordat de animatie begint. Verder heb ik overal de margins en paddings op 0 gezet door (*{margin:0; padding:0;} ) en heb ik je menu div even een achtergrondkleur gegeven om de veranderingen duidelijk te zien.

Code:

<html>
<body>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<style type="text/css">
*{margin:0; padding:0;}
#menu_left{margin:20px 0 0 100px; width:960px;}
#menu_middle{background-color:red; width:200px;}
#menu_middle ul{list-style-type:none;}
</style>
</head>
    <div id="menu_left"></div>
           <div id="menu_middle">
            <div id="navigation">
               <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Our creations</a></li>
                <li><a href="#">References</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
        </div>

<script>
        $("#menu_middle").delay(3000).animate( { width: "57%" });
</script>
</body>
</html>

Ik hoop dat je hier wat aan hebt.

**stan van oers** · 16-02-2011, 11:43

Wat ik nu krijg is dat de animatie zichzelf uistelt. En heel het menu. Ik wil alleen de menu links 2 a 3 seconden laten delayen.
Aanvullend bericht:
Ik heb hem nu ;) Bedankt iedereen !

**Jorit Tijsen** · 16-02-2011, 11:56

Bedoelt u iets zoals dit?

Code:

<html>
<body>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/slide.js" type="text/javascript"></script>
</head>

    <div id="menu_left"></div>
           <div id="menu_middle">
            <div id="navigation">
               <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Our creations</a></li>
                <li><a href="#">References</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
        </div>

<script>
        $("#menu_middle ul").hide();
        $("#menu_middle").animate( { width: "57%" }, { queue: false, duration: 2000 }).delay(2000).find('ul').show();
</script>
</body>
</html>

Waarom importeert u twee keer de jquery? Één keer van af google en één keer lokaal?

**stan van oers** · 16-02-2011, 11:59

@jorit ik zal even 1tje eraf halen. Bedankt ;) had eroverheen gekeken

**Jorit Tijsen** · 16-02-2011, 12:11

Dit werkt misschien beter:

Code:

$("#menu_middle ul").css('opacity','0');
$("#menu_middle").animate( { width: "57%" }, { queue: true, duration: 2000, complete: function(){$("#menu_middle ul").css('opacity','1');}});

**stan van oers** · 16-02-2011, 12:19

@Jorit dat is precies wat ik bedoelde! Bedankt ;)

jQuery - delay text