CODEWITHSUNDEEP
jqueryweb
Buit
Buit

Reputation: 79

jquery load html with ajax and let it slide in your page

I'm making a webapge, and i need to load an html page in my home page with a clicking event. that is working fine.

my question is, is it possible to let the incoming html page to slide in the homepage?

i'm loading the html page with the following:

$.ajax({
    url: "gegarandeerd.html",
    dataType: "html",
    success: function(data) {
        $("#content").html(data);
    }
});​

how can i make the loaded data, slide in the page?

Upvotes: 5

Views: 10967

Answers (2)

VisioN
VisioN

Reputation: 145408

This effect looks good.

$.ajax({
    url: "gegarandeerd.html",
    dataType: "html",
    success: function(data) {
        $("#content").fadeOut(function() {
            $(this).html(data).slideDown();
        });
    }
});​

The old content is fading out and the new content is sliding down.

DEMO: http://jsfiddle.net/2yJhc/

Upvotes: 5

Rizstien
Rizstien

Reputation: 802

$('#book').slideDown('slow', function() { // Animation complete. });

$.ajax({
            url:"gegarandeerd.html",
            dataType: "html",
            success: function(data){    
                $("#content").html(data);
  $('#content').slideDown('slow', function() {
    // Animation complete.
  });
                }   
            });

try this

Upvotes: 0

Related Questions