Posted By

delineo on 12/03/10

Tagged

Versions (?)

Last Edited at 12/03/10 04:16am

Statistics

Viewed 672 times

Favorited by 0 user(s)

Related snippets

Scrolling animation

/ Published in: jQuery

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<ul id="homeExploreAni">
<li><img src="/images/pic-home-explore-wellbeing.gif" alt="" /></li>
<li><img src="/images/pic-home-explore-support.gif" alt="" /></li>
<li><img src="/images/pic-home-explore-keep-learning.gif" alt="" /></li>
</ul>
 
<script type="text/javascript">
 
$(document).ready(function () {
 
    // set up home explore animation
    $("#homeExploreAni li:eq(0)").css("left", "-10px");
    $("#homeExploreAni li:eq(1)").css("left", "80px");
    $("#homeExploreAni li:eq(2)").css("left", "170px");
 
    // moves ani left
    function manAniLoop() {
        $("#homeExploreAni li").animate({ left: "-=90px" }, 200, CheckPositionLeftAni());
    };
 
    function CheckPositionLeftAni() {
        $("#homeExploreAni li").each(
                function () {
                    if ($(this).css("left") == "-10px") {
                        $(this).css("left", "260px");
                    };
                    if ($(this).css("left") == "170px") {
                        FocusOnAni(this);
                    };
                    if ($(this).css("left") == "80px") {
                        FocusOffAni(this);
                    };
                });
    };
 
    // increases text/image size on central item
    function FocusOnAni(item) {
        $(item).children("img").animate({ width: "90px", height: "90px", left: "0px", top: "0px" }, 100);
    }
 
    // decreases text/image size on central item
    function FocusOffAni(item) {
        $(item).children("img").animate({ width: "40px", height: "40px", left: "25px", top: "25px" }, 100);
    }
 
});
 
</script>