I find the background transition of the jQuery Colorbox very 'hard'. I couldn't find a setting where I can specify a custom transition. Is it possible to create a fade-effect for the background like Nyro Modal has?
+3
A:
DEMO: http://jsbin.com/ewomi3/7/edit
UPDATED
$('.example').colorbox({
//added to remove initial flickering
opacity : 0,
//use the onOpen event...
onOpen: function() {
// prevent Overlay from being displayed...
$('#cboxOverlay,#colorbox').css('visibility', 'hidden');
// make the overlay visible and
// re-add all it's original properties!
$('#cboxOverlay').css({
'visibility': 'visible',
'opacity': 0.9,
'cursor': 'pointer'
// execute our original animation on the overlay!
// animate it you can use here all the
// possible animate combination or plugin...
}).animate({
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 1000 , function() {
$('#colorbox').css({
'visibility': 'visible'
}).fadeIn(1000);
});
}
});
aSeptik
2010-05-03 20:23:00
Your example looks alright, however displaying of the box does not 'wait' for the background displaying to finish... I don't think there is a valid solution for that..?
Ropstah
2010-05-03 20:39:26
yes is possible! see updates!
aSeptik
2010-05-03 20:46:42
you are magnificent :P
Ropstah
2010-05-03 20:51:45
you are welcome bro! ;-) don't forget that you can of course use animate instead of fadeIn and viceversa! also use the easing plugin that rook!
aSeptik
2010-05-03 20:56:25
Whoops, while testing in my app I noticed that the overlay shows/hides in a fraction of a second... This produces a very irritating flicker of the screen... Is there a workaround for this..?
Ropstah
2010-05-03 21:00:07
set the `1000` to 2000 or more!
aSeptik
2010-05-03 21:02:19
no doesn't help... before this line is executed | $('#cboxOverlay,#colorbox').css('visibility', 'hidden'); |the #cboxOverlay div is already visible for ~0.01 seconds...
Ropstah
2010-05-03 21:09:39
I found a solution to the last problem myself, you might want to update your answer. It includes passing {opacity:0} as a setting. Then the default overlay show() function doesn't really show, because it's 0 opacity. Thanks for your efforts!
Ropstah
2010-05-03 21:39:31
great job!! ;-)
aSeptik
2010-05-03 21:44:18