I've added the minimum setup of jQuery Tools Overlay to my site. When it's opened, it hits the eye hard. I found this code snippet in the docs that shows how to create a custom animation, but it produces really weird and unpredictable results (website jumps to home directory and scrolls up when overlay is opened):
// loading animation
$.tools.overlay.addEffect("drop", function(css, done) {
// use Overlay API to gain access to crucial elements
var conf = this.getConf(),
overlay = this.getOverlay();
// determine initial position for the overlay
if (conf.fixed) {
css.position = 'fixed';
} else {
css.top += $(window).scrollTop();
css.left += $(window).scrollLeft();
css.position = 'absolute';
}
// position the overlay and show it
overlay.css(css).show();
// begin animating with our custom easing
overlay.animate({ top: '+=55', opacity: 1, width: '+=20'}, 400, 'drop', done);
/* closing animation */
}, function(done) {
this.getOverlay().animate({top:'-=55', opacity:0, width:'-=20'}, 300, 'drop', function() {
$(this).hide();
done.call();
});
}
);
$("img[rel]").overlay({
effect: 'drop',
mask: '#789'
});
I just want that the overlay opens like it does already (just open, no zoom in/out, etc), but at least blend in smoothly from transparent to opaque...
Must I mess around deeper in the implementation of this to achieve that?