2010-05-03 49 views
3

我發現jQuery Colorbox的背景過渡非常「困難」。我找不到可指定自定義轉場的設置。 是否有可能爲Nyro Modal這樣的背景創建淡入淡出效果?jQuery Colorbox背景過渡效果?

+0

看到它在行動! ;-) – 2010-05-03 20:33:13

回答

11

更新2與緩解作用

DEMO:http://so.devilmaycode.it/jquery-colorbox-background-transition-effect/

$('.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); 
     }); 
    } 
}); 
+0

你的例子看起來不錯,但是盒子的顯示不能等待背景顯示完成......我不認爲有一個有效的解決方案..? – Ropstah 2010-05-03 20:39:26

+0

是可以的!看到更新! – 2010-05-03 20:46:42

+0

歡迎你! ;-)不要忘記,你當然可以使用動畫而不是淡入淡出,反之亦然!也使用白嘴鴉的緩動插件! – 2010-05-03 20:56:25