Animating downwards with JS

Question

I have several pages (including an 'include' php page which contains my menu links. And I also have a footer 'include' php page).

Basically, I thought of having this smooth animation, where my "pouch" as I call it, animates downwards. It's basically a slightly more fancy type of rectangle that has a width of 1000px. So, whenever I click on "Services" for example, it would animate slowly enough downwards.

Aside from the links on my pages, the order of what I currently have goes as follows: I have my scripts externalized, and I have text on each of my pages. So for the "Services" page for example, I have my text, followed by the "pouch". The "pouch" is on my footer 'include' php page.

This is the code I have for the animation. I have a similar code which works on another project which includes more coding. But, I assume this code here is correct. The question is, how can I make it that this code is triggered before loading the other page's text:

$('#services-fr-2').click(function(){
   if ( $('#green-pouch-fr').height() == 580 ) {
      $('#green-pouch-fr').animate({
         'top':'800px',
         'height':'500'
      })

In other words, even though the text is on the next page, I would need the pouch to animate downwards, followed by the text appearing.

Andrew Shepherd · Answer 1 · 2013-10-15T00:58:19.590

0

The animate function accepts, as a parameter, a function to be invoked after the animation completes.

If this question is asking how to set the text only after the animation completes, you can do it like so:

 $('#green-pouch-fr').animate({
            'top':'800px',
            'height':'500'
            }, 
            {
                complete: function() {
                      $(this).text(pageContent);
                }
            }
  );

edited Oct 15 '13 at 00:58

answered Oct 15 '13 at 00:41

Andrew Shepherd

44,254
30
139
205

I tried as you suggested. Btw, the pageContent, that's suppose to be in quotation with the page content itself? Assuming I did this correctly, nothing happens. Also, does your code actually try to do that on the same page? OR on the next page. Because when I click on a link, it's literally another page. So it possible that it never finished the action as it lands on the next page? – Midevil Chaos Oct 15 '13 at 22:31
@Midevil Chaos - I'm assuming that 'pageContent' is a variable showing whichever content you want to display. One the "another page" problem, it could be that your click handler is triggering a post-back. See http://stackoverflow.com/questions/16145989/jquery-asp-net-stopping-postback – Andrew Shepherd Oct 15 '13 at 22:53
Check out my comment below (the one for PHPglue). I verified both your links and made as much sense I could with the time I had tonite. Hopefully what's on the fiddle means I'm on the right track. Btw, when you said variable, were you actually saying I should create a variable in this context? If so, could you elaborate on the usefulness and actual use of it in this circumstance? (no sarcasm) – Midevil Chaos Oct 16 '13 at 03:21

score 0 · Answer 2 · answered Oct 15 '13 at 00:48

0

Try something like:

 $.ajax(/* ajax stuff here */).done(function(data){
   $('#green-pouch-fr').animate({
     top: '800px',
     height: '500'
     }, 500, function(){
       //run your text data here
     }
   });
  });

answered Oct 15 '13 at 00:48

StackSlave

10,613
2
18
35

Wouldn't that merely refresh the page for new data to be seen? I'm not familiar at all with ajax. Used it a few times, but not enough to know how to code it. – Midevil Chaos Oct 15 '13 at 22:24
How else would you get data from another page based on an action? AJAX will not refresh the entire page, it's like a partial submission. You pass an Object to the `$.ajax()` method. You probably want to go to http://api.jquery.com/jQuery.ajax/ hit ctrl+f and insert the following: `Save some data to the server and notify the user once it's complete.`. This example should help. – StackSlave Oct 15 '13 at 22:49
I tried out a few things with ajax and this one here seemed the most logical. I know it's wrong. But, I don't see the ill logic of it. Perhaps you could take a look at it. Note that the services page is the SECOND page (basically, the main page has an onClick on the a href. But what is on the fiddle is the services page, and the js file and css file). http://jsfiddle.net/qdshz/ – Midevil Chaos Oct 16 '13 at 03:14
I updated your Fiddle at http://jsfiddle.net/qdshz/1/ to give you a better idea of how this would work. Of course, if your page at `url:page.php` is dependent on data on your current page then you need to include `data:JSONobject`, which would be sent to your PHP page. If you still don't understand, ask someone in person, maybe that will help. – StackSlave Oct 17 '13 at 23:22
After spending a full day trying to figure out what you're saying, I have to admit I don't know (spoke to a friend of mine, but she isn't great in JS, and I was still confused). I'm not experienced at all using JavaScript. I know the basics, but the rest is complicated for me. In any case, is there any tutorial you could recommend? Or at least online material that would be easy to comprehend for someone with more HTML experience and PHP experience as opposed to JavaScript? Anything simple to understand JS wise would be welcomed. – Midevil Chaos Oct 19 '13 at 20:58
1

This is a good book. It teaches HTML, CSS, JavaScript, and PHP. http://www.dummies.com/store/product/HTML5-and-CSS3-All-in-One-For-Dummies-3rd-Edition.productCd-1118289382.html – StackSlave Oct 21 '13 at 23:30
Thanks for that link :D Coming out in December 2013 I see. Good. – Midevil Chaos Oct 23 '13 at 15:16

Animating downwards with JS

2 Answers2