|
10
|
1
|
|
|
2 function transition( $from, $to ) {
|
|
|
3 $from.hide();
|
|
|
4 $to.show();
|
|
|
5 }
|
|
|
6
|
|
|
7 function transitionSlideUpSlideDown( $from, $to ) {
|
|
|
8 $from.slideUp( 500, function() { $to.slideDown( 1000 ); } );
|
|
|
9 }
|
|
|
10
|
|
|
11 function transitionFadeOutFadeIn( $from, $to ) {
|
|
|
12 $from.fadeOut( 500 );
|
|
|
13 $to.fadeIn( 500 );
|
|
|
14 }
|
|
|
15
|
|
|
16 /***********************
|
|
|
17 * sample custom transition using scrollUp effect
|
|
|
18 * inspired by Karl Swedberg's Scroll Up Headline Reader jQuery Tutorial[1]
|
|
|
19 * [1] http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader
|
|
|
20 */
|
|
|
21
|
|
|
22 function transitionScrollUp( $from, $to ) {
|
|
|
23 var cheight = $from.outerHeight();
|
|
|
24
|
|
|
25 // hide scrollbar during animation
|
|
|
26 $( 'body' ).css( 'overflow-y', 'hidden' );
|
|
|
27
|
|
|
28 $to.css( 'top', cheight+'px' );
|
|
|
29 $to.show();
|
|
|
30
|
|
|
31 $from.animate( {top: -cheight}, 'slow' );
|
|
|
32 $to.animate( {top: 0}, 'slow', function() {
|
|
|
33 $from.hide().css( 'top', '0px');
|
|
|
34
|
|
|
35 // restore possible scrollbar
|
|
|
36 $( 'body' ).css( 'overflow-y', 'auto' );
|
|
|
37 });
|
|
|
38 } |
