0

I'm looking for a script which does the following:

I have a banner with height 200px, below that banner I have a couple of links. When I click on one of the link (let say with class="link-one") then first let the banner animate to 0px height, then ajax load the new page with banner height 0 and then animate to 200px height.

Maybe it's a bit hard to use ajax and I can keep that part out, so befor loading the new page do the animation and when loaded the new page do the animation.

fourroses
  • 93
  • 1
  • 3
  • 15
  • Put the ajax load in the first animate's callback, and put the second animate in the ajax load callback. What have you tried and why didn't it work? – Barmar Nov 03 '13 at 19:18
  • I don't know how to start, do you have a example what you mean? Like I said, the ajax part isn't the most important, I need to animate something befor the new page load, and on pageload animate. – fourroses Nov 03 '13 at 19:38
  • If you don't do the ajax part, there won't be a new page load, will there? – Barmar Nov 03 '13 at 19:40
  • I really wouldn't know, isn't this something js can do befor loading a a href link with a class x? Sorry but I'm not a coder as you might have noticed – fourroses Nov 03 '13 at 19:47
  • If you follow an href link, you can't do anything _after_ it. When you load a new page, all scripts from the old page stop. That's why you have to use AJAX if you want to keep control after loading the new data. – Barmar Nov 03 '13 at 19:50

1 Answers1

0
//example from flicker, can be any ajax call
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

$("#banner").click(function() {
    $(this).animate({height:"toggle"},5000,function() { //height:toggle changes the height to 0, the bak to the original height

        $.getJSON( flickerAPI, {
        tags: "mount rainier",
        tagmode: "any",
        format: "json"
        }).done(function( data ) {
            $("#banner").animate({height:"toggle"},5000,function() {
                alert("done")        
            });
         });
    });
});
user1129360
  • 140
  • 9
  • Hmm, I'm not a coder, but it looks good. The var flickerAPI , that is the page its comming from? and does it need the ?jsoncallback=? – fourroses Nov 03 '13 at 19:45
  • Yes, that's the page it is coming from. This is a [jsonp](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about) request, because the page is on a different domain. There are many ways to use ajax. You probabely want to get the new page from a page on your domain and use [$.get](http://api.jquery.com/jQuery.get/), [$.post](http://api.jquery.com/jQuery.post/) or [$.ajax](http://api.jquery.com/jQuery.ajax/). – user1129360 Nov 03 '13 at 21:09