Flying Effect

flying~ flying~

by Reiot

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css">
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="a"></div>

<label for="effect">Effect</label>
<select id="effect"></select>

CSS

#a {
    position: absolute;
    background: gray;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
}

JavaScript

$(function(){
    
    $.fn.flying = function(height, flyingTime){
    //console.log('dropWidth',dropWidth);
        var effect = $('#effect').val();
    return this.animate({
            top: ["+="+height+"px", effect]
        },{
            duration: flyingTime + Math.random()*height,
            complete:function(){
                $(this).flying(-height, flyingTime);
            }
        });    
};

    var effects = $('#effect');
        for (var x in jQuery.easing) {
            //console.log(x);
            if (x != 'linear' && x != 'swing') {
                effects.append($('<option>').attr('value', x).text(x));
            }               
        }
    
$('#a').flying(20,5000);

});