| Index: trunk/extensions/UploadWizard/js/jquery/plugins/jquery.morphCrossfade.js |
| — | — | @@ -47,14 +47,17 @@ |
| 48 | 48 | // the elements that are immediate children are the crossfadables |
| 49 | 49 | // they must all be "on top" of each other, so position them relative |
| 50 | 50 | this.css( { |
| 51 | | - 'position' : 'relative', |
| 52 | | - 'overflow' : 'hidden' |
| | 51 | + position : 'relative', |
| | 52 | + overflow : 'hidden', |
| | 53 | + scroll: 'none' |
| 53 | 54 | } ); |
| 54 | 55 | this.children().css( { |
| 55 | | - 'opacity': 0, |
| 56 | | - 'position': 'absolute', |
| | 56 | + position: 'absolute', |
| 57 | 57 | 'top': '0px', |
| 58 | | - 'left' : '0px' |
| | 58 | + left : '0px', |
| | 59 | + scroll: 'none', |
| | 60 | + opacity: 0, |
| | 61 | + visibility: 'hidden' |
| 59 | 62 | } ); |
| 60 | 63 | |
| 61 | 64 | // should achieve the same result as crossfade( this.children().first() ) but without |
| — | — | @@ -66,24 +69,42 @@ |
| 67 | 70 | |
| 68 | 71 | /** |
| 69 | 72 | * Initialize crossfading of the children of an element |
| 70 | | - * @param selector should be an immediate child of the crossfader element |
| | 73 | + * @param selector of new thing to show; should be an immediate child of the crossfader element |
| 71 | 74 | * @param speed (optional) how fast to crossfade, in milliseconds |
| 72 | 75 | */ |
| 73 | | - $.fn.morphCrossfade = function( selector, speed ) { |
| | 76 | + $.fn.morphCrossfade = function( newPanelSelector, speed ) { |
| | 77 | + var container = this; |
| 74 | 78 | if ( typeof speed === 'undefined' ) { |
| 75 | 79 | speed = 400; |
| 76 | 80 | } |
| 77 | 81 | |
| 78 | | - if ( this.data( 'crossfadeDisplay' ) ) { |
| | 82 | + container.css( { 'overflow' : 'hidden' } ); |
| | 83 | + |
| | 84 | + $oldPanel = $( container.data( 'crossfadeDisplay' ) ); |
| | 85 | + if ( $oldPanel ) { |
| | 86 | + // remove auto setting of height from container, and |
| | 87 | + // make doubly sure that the container height is equal to oldPanel |
| | 88 | + container.css( { height: $oldPanel.outerHeight() } ); |
| | 89 | + // take it out of the flow |
| | 90 | + $oldPanel.css( { position: 'absolute' } ); |
| 79 | 91 | // fade WITHOUT hiding when opacity = 0 |
| 80 | | - $( this.data( 'crossfadeDisplay' ) ).animate( { opacity: 0 }, speed ); |
| | 92 | + $oldPanel.animate( { opacity: 0 }, speed, 'linear', function() { |
| | 93 | + $oldPanel.css( { visibility: 'hidden'} ) |
| | 94 | + } ); |
| 81 | 95 | } |
| 82 | | - this.data( 'crossfadeDisplay', selector ); |
| | 96 | + container.data( 'crossfadeDisplay', newPanelSelector ); |
| 83 | 97 | |
| 84 | | - this.animate( { height: $( selector ).outerHeight() }, speed ); |
| 85 | | - $( selector ).animate( { opacity: 1 }, speed ); |
| | 98 | + var $newPanel = $( newPanelSelector ); |
| | 99 | + $newPanel.css( { visibility: 'visible' } ); |
| | 100 | + container.animate( { height: $newPanel.outerHeight() }, speed, 'linear', function() { |
| | 101 | + // we place it back into the flow, in case its size changes. |
| | 102 | + $newPanel.css( { position: 'relative' } ); |
| | 103 | + // and allow the container to grow with it. |
| | 104 | + container.css( { height : 'auto' } ); |
| | 105 | + } ); |
| | 106 | + $newPanel.animate( { opacity: 1 }, speed ); |
| 86 | 107 | |
| 87 | | - return this; |
| | 108 | + return container; |
| 88 | 109 | }; |
| 89 | 110 | |
| 90 | 111 | } )( jQuery ); |