gfx
Version:
3D CSS3 animation library for jQuery
53 lines (42 loc) • 1.33 kB
text/coffeescript
$ = jQuery
isOpen = ->
!!$('#gfxOverlay').length
close = ->
overlay = $('#gfxOverlay')
overlay.find('#gfxOverlayPanel').gfx(scale: '1.1', opacity: 0)
overlay.gfx(background: 'rgba(0,0,0,0)')
overlay.queueNext -> overlay.remove()
panelCSS =
opacity: 0
scale: 0.5
overlayStyles =
display: 'block'
position: 'fixed'
zIndex: 99
top: 0
left: 0
width: '100%'
height: '100%'
background: 'rgba(0,0,0,0)'
$.gfxOverlay = (element, options = {}) ->
close() if isOpen()
element = $(element)
if element[0].tagName is 'SCRIPT'
element = element.html()
else
element = element.clone()
options.css or= {}
options.css.width = options.width if options.width
options.css.height = options.height if options.height
overlay = $('<div />').attr('id': 'gfxOverlay')
overlay.css(overlayStyles)
overlay.click(close)
overlay.delegate('.close', 'click', close)
overlay.bind('close', close)
panel = $('<div />').attr('id': 'gfxOverlayPanel')
panel.transform($.extend({}, panelCSS, options.css))
panel.append(element)
overlay.append(panel)
$('body').append(overlay)
overlay.delay().gfx({background: 'rgba(0,0,0,0.5)'}, {duration: options.duration})
panel.delay().gfx({scale: 1, opacity: 1}, {duration: options.duration})