[jQuery] Animation circulaire avec .animate()

by Jean-Baptiste Audras

HTML

<div class="ilbouge">
    <div class="ilbouge-texte">Références</div>
</div>

CSS

body {
    background:#ccc;
}
.ilbouge {
    display:block;
    position: absolute;
    margin: 0;
    padding:0;
    width: 300px;
    height:300px;
    top:-100px;
    left: 20%;
    background: #e50083;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    -ms-border-radius: 150px;
    border-radius: 150px;
}
.ilbouge-texte {
    position: absolute;
    display: inline-block;
    top: 130px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: #fff;
}

JavaScript

function animatethis(targetElement, speed) {
    $(targetElement).animate({ 
        top: "-=10px", 
        left: "+=10px"
    }, {
        duration: speed,
        complete: function () {
            targetElement.animate({ 
                top: "+=10px", 
                left: "+=10px" 
            }, {
                duration: speed,
                complete: function () {
                    targetElement.animate({ 
                        top: "+=10px", 
                        left: "-=10px" 
                    }, {
                        duration: speed,
                        complete: function () {
                            targetElement.animate({
                                top: "-=10px",
                                left: "-=10px"
                            },{
                                duration: speed,
                                complete: function() {
                                    animatethis(targetElement, speed);
                                }
                            });
                        }
                    });
                }
            });
        }
    });
};
animatethis($('.ilbouge'), 2000);