diff options
| author | Jed Foster <jed@jedfoster.com> | 2014-12-31 08:25:18 -0800 |
|---|---|---|
| committer | Jed Foster <jed@jedfoster.com> | 2014-12-31 08:25:18 -0800 |
| commit | f6879f02f55d6ff3841b9470cfc7048ff82ce2a6 (patch) | |
| tree | 8f3cb23830df419a477e9512bb20b36fd53c95c2 | |
| parent | 24d2f57c978d83edd2c5215ef1a19bcff9f5fc8c (diff) | |
| download | Readmore.js-f6879f02f55d6ff3841b9470cfc7048ff82ce2a6.zip Readmore.js-f6879f02f55d6ff3841b9470cfc7048ff82ce2a6.tar.gz Readmore.js-f6879f02f55d6ff3841b9470cfc7048ff82ce2a6.tar.bz2 | |
Replace jQuery.animate() with CSS3 transition
| -rw-r--r-- | readmore.js | 21 |
1 files changed, 14 insertions, 7 deletions
diff --git a/readmore.js b/readmore.js index 1229fb4..4bb122c 100644 --- a/readmore.js +++ b/readmore.js @@ -37,7 +37,13 @@ delete(this.options.maxHeight); if(this.options.embedCSS && ! cssEmbedded) { - var styles = '.readmore-js-toggle, .readmore-js-section { ' + this.options.sectionCSS + ' } .readmore-js-section { overflow: hidden; }'; + var styles = '.readmore-js-toggle, .readmore-js-section { ' + this.options.sectionCSS + ' } .readmore-js-section { ' + + 'transition: height ' + this.options.speed + 'ms;' + + '-webkit-transform: translate3d(0,0,0);' + + '-ms-transform: translate3d(0,0,0);' + + 'transform: translate3d(0,0,0);' + + 'overflow: hidden;' + + '}'; (function(d,u) { var css=d.createElement('style'); @@ -122,15 +128,16 @@ // Fire beforeToggle callback $this.options.beforeToggle(trigger, element, expanded); - $(element).animate({'height': newHeight}, {duration: $this.options.speed, complete: function() { - // Fire afterToggle callback - $this.options.afterToggle(trigger, element, expanded); + $(element).css({"height": newHeight}); - $(trigger).replaceWith($($this.options[newLink]).on('click', function(event) { $this.toggleSlider(this, element, event) }).addClass('readmore-js-toggle')); + // Fire afterToggle callback + $(element).on('transitionend', function(e) { + $this.options.afterToggle(trigger, element, expanded); - $(this).removeClass($this.options.collapsedClass + ' ' + $this.options.expandedClass).addClass(sectionClass); - } + $(this).removeClass($this.options.collapsedClass + ' ' + $this.options.expandedClass).addClass(sectionClass); }); + + $(trigger).replaceWith($($this.options[newLink]).on('click', function(event) { $this.toggleSlider(this, element, event) }).addClass('readmore-js-toggle')); }, setBoxHeight: function(element) { |