Friday 31 October 2014

Slide animation of ajax loaded divs with jQuery

Since I'm a real newbie in terms of web development this will most probably be really helpful mostly to me sometime in the future when I've forgotten all this.

I'm building a simple single-page website which requires some sliding animation, but the divs which are getting animated are actually separate .html files loaded with ajax through jQuery. There's a lot of information on loading pages through jQuery or animating html elements. Not so much on using both at the same time. And for a beginner it posed certain problem.

First the links which trigger the animation:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<nav id="menu">
    <ul>
        <li>
            <div style="background-color: rgba(175, 120, 75, 0.5)">
                <a href="#" id="mainpage">Main page</a>
            </div>
        </li>
        <li>
            <div style="background-color: rgba(120, 90, 175, 0.5)">
                <a href="#" id="page2">Second page</a>
            </div>
        </li>
        <li>
            <div style="background-color: rgba(75, 175, 90, 0.5)">
                <a href="#" id="page3">Third page</a>
            </div>
        </li>
    </ul>
</nav>

Here's the html for sliding-animated divs:

1
2
3
4
5
6
<div id="slideWrapper">
    <div id="slider1">
    </div>
    <div id="slider2">
    </div>
</div>

Here's the CSS: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#slideWrapper {
    width: 100%;
    height: 300px;
    float: left;
    position: relative; 
}

div#slideWrapper > div {
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 100%;
    height: 300px;
    float: left;
    position: absolute;
    overflow: hidden;
}

And here's the javascript: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var _showedSubPage = "";

$(document).ready(function () {

    // Configure on click events, 
    // first argument: id of the button I'm clicking on, second: url
    loadPageOnClick("mainpage", "subpages/page1.html");
    loadPageOnClick("page2", "subpages/page2.html");
    loadPageOnClick("page3", "subpages/page3.html");
    
    // Initial load of the page
    $("#slider1").load("subpages/page1.html");
    $("#slider1").addClass("slidedIn");
    $("#slider2").addClass("slidedOut");

    _showedSubPage = "mainpage";
});

loadPageOnClick = function (sourceId, url) {
    jQuery(document).ready(function () {
        jQuery("#" + sourceId).click(function () {
            
            var divToSlideIn = $("#slideWrapper").find(".slidedOut");
            var divToSlideOut = $(divToSlideIn).siblings(".slidedIn");

            // don't animate if the click is on the same button
            if (_showedSubPage != sourceId
                && !$(divToSlideOut).hasClass("animating")
                && !$(divToSlideIn).hasClass("animating")) {
                _showedSubPage = sourceId;
                
                $(divToSlideOut).addClass("animating");
                $(divToSlideIn).addClass("animating");

                // change classes on slider divs
                $(divToSlideOut).removeClass("slidedIn").addClass("slidedOut");
                $(divToSlideIn).removeClass("slidedOut").addClass("slidedIn");

                // load webpage through ajax
                $(divToSlideIn).load(url);

                $(divToSlideOut).animate({
                    right: $(divToSlideOut).width()
                }, 600, null, function() {
                    $(divToSlideOut).hide();
                    $(divToSlideOut).empty();
                    $(divToSlideOut).insertBefore($(divToSlideIn));
                    $(divToSlideOut).removeClass("animating");
                });

                $(divToSlideIn).show().css({
                    right: -($(divToSlideIn).width())
                }).animate({
                    right: 0
                }, 600, null, function() {
                    $(divToSlideIn).removeClass("animating");
                });
            }
        });
    });
};

To summarize, what I do is I juggle with 2 divs. One is being shown, the other is hidden. On click on one of the links I load the hidden div with the html from the appropriate webpages. Then I animate and slide in the div with the newly loaded html and display it while sliding out and hiding the previous one. This cycle is being done every time any link is clicked.

UPDATE:
I've noticed that the comparing with the current button wasn't working so I fixed it, also added blocking of the animation while it's running and hooked up the complete callback properly.

Posted by at
Labels: , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)