lenglain Posted December 16, 2011 Share Posted December 16, 2011 hello I've been avoiding javascript and jquery in building my comicbook website but I think I need to use it for a simple trick that I had learned to do a while back but completely forgot and cant find anywhere on the web. I just want the little facebook and twitter icons to slide into view. as soon as the page loads I want the fb icon to slide down and the twitter icon to slide down 1 second later. All I could find on google are how to make divs slide down on click. I just need these two tiny divs to slide down once the page loads, and to be able to control how long a div should wait before sliding into view.. I tried looking at the jquery documentation but im so green to jquery that I have trouble making sense of it. Any suggestions? thanks. Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted December 16, 2011 Share Posted December 16, 2011 You could just use an bit of old school javascript on your body tag: <body onload="YourAnimationFunction()" > This will load the function once the page loads. The anim function refers to the function that holds all your animation functions. Quote Link to comment Share on other sites More sharing options...
paparts Posted December 17, 2011 Share Posted December 17, 2011 jQuery <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#tinydiv1, #tinydiv2').slideDown(time).delay(time).slideUp(time); }); </script> HTML <div id="tinydiv1"></div> <div id="tinydiv2"></div> CSS #tinydiv1, #tinydiv2 { display: none; } Quote Link to comment Share on other sites More sharing options...
lenglain Posted December 18, 2011 Author Share Posted December 18, 2011 Thank you guys!! I had actually found a way to do it, but paparts I prefer your code (simpler.) this is the code I had worked with: $(document).ready(function(){ $("div#Container").hide(); var autoTimer = null; autoTimer = setTimeout(function(){ $("div#RgContainer").fadeIn("slow"); },1000); It seems that paparts is simpler and cleaner. I am completely new to jquery so I'm checking out some video tutorials to understand the difference between the two and exactly what I'm doing. But thank you so much I really appreciate it. I have two more questions. 1. is it possible to update this code to make the div slide up and down ad infinitum? like a loop? 2. what do I have to change to make the divs slide sideways? Quote Link to comment Share on other sites More sharing options...
paparts Posted December 18, 2011 Share Posted December 18, 2011 1. Yes its possible: <script type="text/javascript"> jQuery(document).ready(function(){ setInterval(function() { jQuery('#tinydiv1, #tinydiv2').slideDown(time).delay(time).slideUp(time); }, time); }); </script> 2. There are a lot of ways to do it sideways sideways One approach is to change the div's css and another is the one I prefer using jQuery: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #d1,#d2 { display:none; } #d1 {background: blue; margin:10px 0px;} #d2 {background: red; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> </head> <body> <div id="d1">I am div 1.</div> <div id="d2">Div 2 here.</div> <script type="text/javascript"> jQuery(document).ready(function(){ setInterval(function() { jQuery('#d1, #d2').show("slide", { direction: "right" }, 1000).delay(4000).hide("slide", { direction: "left" }, 1000); }, '2000'); }); </script> </body> </html> You can copy the whole thing and see. Use also CDNs for jQuery and jQueryUI to load faster in the user end. Quote Link to comment Share on other sites More sharing options...
lenglain Posted December 21, 2011 Author Share Posted December 21, 2011 after trying a variety of methods, fromt he slidein to the slide toggle to the animate margin methods, I've found a method that comes closest to what I am looking to do and here is the example: http://cam-it.com/test.html I've discovered the bounce function on the jquery site and by tinkering with that I've achieved this effect, which is close to achieving what I had intended all along. Below is the code, do you guys believe that this is a desirable way to achieve the animation? once again, I'm new to jquery and am going by trial and error and therefore I'm always afraid that the way I'm doing something is either too complicated, not valid etc.. Code: <!DOCTYPE html> <html> <head> <style> body { background-color:#000000; } #square{ width:356px; height:52px; background-image:url(images/ANIMATEINS.png); background-repeat:no-repeat; position:relative; } #container{ margin:100px auto; width:356px; height:52px; background-image:url(images/ANIMATE.png); background-repeat:no-repeat; position:relative; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="container"> <div id="square"> </div> </div> <script type="text/javascript"> var $square = $("#square"); bounce(); function bounce() { $square.animate({ left: "+=170" }, 6000, function() { $square.animate({ left: "-=165" }, 3000, function() { bounce(); }) $square.fadeOut (5000); $square.fadeIn(3000); }); } </script> </body> </html> paparts I tried your code but I wasn't sure how to make it achieve something like this effect. I did tinker with it and achieve other effects that will be very useful to me moving forward, thank you so much! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.