Home/ Questions/Q 8061711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T10:25:47+00:00

Is there a way to use jquery.animate to load a page with ajax and

  • 0

Is there a way to use jquery.animate to load a page with ajax and when its ready animate it to slide up or to the side? So lets say im in the index.html page and I want to go to the about.html page, it will first load it and when it is ready instead of refreshing to the new page, it will animate it using this method: http://demos.flesler.com/jquery/localScroll/#section4c

function(){
$("#go2About").click(function(){
    $('about.html').animate({
         //animate the new page here
    });
});

this will be some kind of an example code of how it will animate

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could use something like this logic:

    <!DOCTYPE>

<html>
<head>
    <title>Test</title>

    <script type="text/javascript">
        function loadIt() {
            $.ajax({
                url: "about.html",
                cache: false,
                success: function (data) {
                    $("#content").empty();
                    $(data).hide().appendTo($("#content")).slideDown();
                },
                error: function () {
                    alert("something went wrong");
                }
            });
        }
    </script>
</head>
<body>
    <input type="button" id="button1" value="Load About" onclick="loadIt();" />

    <br />

    <div id="content" style="width: 400px; height: 400px; border: 1px solid #000;">

    </div>
</body>
</html>

    But just know that the content of “about.html” shouldn’t be a full HTML document – it should be something that goes into a <body> element.

    An easier method might be to use an iframe (hidden when it doesn’t have any content) – when you click the button, have javascript set the iframe’s src attribute to “about.html”, then use slideDown() to animate it being “loaded”. This way, “about.html” can be a full HTML document and you don’t have to worry about something like that.

    • 0