var target = $('target');
var fx = new Fx.Morph(target, {
    duration: 1000, 
    chain: 'cancel'
});

var box = $('box');
 
target.setStyles({
    'top': box.getTop(),
    'left': box.getLeft()
});
 
var selectTransition = $('fxTransition');
var selectEase = $('fxEase');
var durationInput = $('duration');
var result = $('result');

$$(selectEase, selectTransition).addEvent('change', function(){
    var transition = selectTransition.get('value');
    if (transition == 'linear'){
        fx.options.transition = Fx.Transitions.linear;
        transition = 'Fx.Transitions.linear';
    } else {
        var ease = selectEase.get('value');
        fx.options.transition = Fx.Transitions[transition][ease];
        transition = 'Fx.Transitions.' + transition + '.' + ease;
    }
    result.set('html',transition);
});
 
selectEase.fireEvent('change');
 
durationInput.addEvent('keyup', function(){
    fx.options.duration = parseFloat(durationInput.get('value')); 
});
 
box.addEvent('mousedown', function(event){
    event = new Event(event);
    fx.start({
        'top': [event.page.y - 25],
        'left': [event.page.x - 25]
    });
    event.stop();
});

<div id="fxNavigation">
        <label for="fxTransition">Transition</label>:
        <select id="fxTransition">
            <option value="linear">Linear</option>
            <option value="Quad">Quadratic</option>
            <option value="Cubic">Cubic</option>
            <option value="Quart">Quartic</option>
            <option value="Quint">Quintic</option>
            <option value="Sine">Sinusoidal</option>
            <option value="Expo">Exponential</option>
            <option value="Circ">Circular</option>
            <option value="Bounce">Bouncing</option>
            <option value="Back">Back</option>
            <option value="Elastic">Elastic</option>
        </select>
        <select id="fxEase">
            <option value="easeIn">easeIn</option>
            <option value="easeOut">easeOut</option>
            <option value="easeInOut">easeInOut</option>
        </select>
        <label for="duration">duration</label>: <input type="text" id="duration" value="1000" />
        <b id="result"></b>
</div>
<div id="box">
    <div id="target"></div>
</div>

#box {
    height: 500px;
    width: 100%;
    background: #ccc;
    margin-top: 10px;
    overflow: hidden;
}
 
#target {
    height: 50px;
    width: 50px;
    background: #ff3300;
    position: absolute;
}

MooShell