Jump to content

lenglain

New Members
  • Posts

    5
  • Joined

  • Last visited

    Never

Profile Information

  • Gender
    Not Telling

lenglain's Achievements

Newbie

Newbie (1/5)

0

Reputation

  1. Hi I actually worked it out, I had used the same "Bounce" function in both scripts, so I called one Bounce2 for the second script. dumb mistake, but I'm still completely new at this. thanks
  2. Hi guys, here is an example of what I want to do: http://cam-it.com/test.html But here is what happens when I try to do that with two divs http://cam-it.com/test2.html Why is this happening? here is the code for the first <!DOCTYPE html> <html> <head> <style> body { background-color:#000000; } #square{ width:356px; height:52px; border: 1px solid red; 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; border:1px solid blue; } #square2{ width:356px; height:52px; border: 1px solid red; background-image:url(images/ANIMATEINS.png); background-repeat:no-repeat; position:relative; } #container2{ margin:100px auto; width:356px; height:52px; background-image:url(images/ANIMATE.png); background-repeat:no-repeat; position:relative; border:1px solid blue; } #box { border: 1px solid #FF0000; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="box"> <div id="container"> <div id="square"> </div> </div> <div id="container2"> <div id="square2"> </div> </div> </div> <script type="text/javascript"> var $square = $("#square"); bounce(); function bounce() { $square.animate({ left: "+=170" }, 1000, function() { /**new command**/ $square.animate({ left: "-=170" }, 1000, function() { bounce(); }) /**end command**/ }); } </script> </body> </html> And here is the code for the second: <!DOCTYPE html> <html> <head> <style> body { background-color:#000000; } #square{ width:356px; height:52px; border: 1px solid red; 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; border:1px solid blue; } #square2{ width:356px; height:52px; border: 1px solid red; background-image:url(images/ANIMATEINS.png); background-repeat:no-repeat; position:relative; } #container2{ margin:100px auto; width:356px; height:52px; background-image:url(images/ANIMATE.png); background-repeat:no-repeat; position:relative; border:1px solid blue; } #box { border: 1px solid #FF0000; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="box"> <div id="container"> <div id="square"> </div> </div> <div id="container2"> <div id="square2"> </div> </div> </div> <script type="text/javascript"> var $square = $("#square"); bounce(); function bounce() { $square.animate({ left: "+=170" }, 1000, function() { /**new command**/ $square.animate({ left: "-=170" }, 1000, function() { bounce(); }) /**end command**/ }); } </script> <script type="text/javascript"> var $square2 = $("#square2"); bounce(); function bounce() { $square2.animate({ left: "+=170" }, 1000, function() { /**new command**/ $square2.animate({ left: "-=170" }, 1000, function() { bounce(); }) /**end command**/ }); } </script> </body> </html>
  3. 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!
  4. 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?
  5. 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.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.