Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

add support for transition effects

  • Loading branch information...
commit 3ecc85d1947afa31dcd98aeb39028a0de427495f 1 parent a88f131
@sprsquish authored
Showing with 49 additions and 10 deletions.
  1. +3 −0  README.txt
  2. +5 −2 index.html
  3. +41 −8 spotlight.js
View
3  README.txt
@@ -24,3 +24,6 @@ Options
featuredClass - Class name to add to a featured item when it is selected
displayTime - Number of seconds to show a feature
autoReStart - After a user hovers over an item, should the rotation be restarted automatically?
+ transition - The transition style (fadeIn, slideDown, etc).
+ For an effect at default speed just use a string: 'fadeIn'
+ To set the speed use an array: ['fadeIn', 'fast']
View
7 index.html
@@ -12,13 +12,16 @@
<script type="text/javascript" charset="utf-8">
$(function() {
$('#spotlight_1').spotlight({displayTime: 1});
- $('#spotlight_2').spotlight({displayTime: 3});
+ $('#spotlight_2').spotlight({
+ displayTime: 3,
+ transition: ['fadeIn', 'slow']
+ });
});
</script>
<style type="text/css" media="screen">
#spotlight { width: 40em; }
- .spotlight_feature { width: 20em; border: solid 1px #ccc; margin-left: 10em; padding: 0.5em; height: 6.5em; }
+ .spotlight_feature { position: relative; width: 20em; border: solid 1px #ccc; margin-left: 10em; padding: 0.5em; height: 6.5em; }
.featured_content { display: none; }
ul { float: left; width: 10em; border: solid 1px #ccc; border-right-style: none; }
ul, li { padding: 0; margin: 0; list-style: none; }
View
49 spotlight.js
@@ -16,7 +16,8 @@
feature : '.spotlight_feature',
featuredClass : 'on',
displayTime : 3,
- autoReStart : true
+ autoReStart : true,
+ transition : null
},
init: function(element, settings) {
@@ -27,6 +28,22 @@
this.features = $(element).find(this.settings.featureItems);
this.featureContainer = $(element).find(this.settings.feature);
+ if (this.settings.transition) {
+ if (typeof this.settings.transition == 'object') {
+ this.settings.transitionSpeed = this.settings.transition[1];
+ this.settings.transition = this.settings.transition[0];
+ }
+
+ this.transitionContainer = this.featureContainer.clone()
+ .css({
+ position: 'absolute',
+ top: 0, left: 0,
+ margin: 0, border: 0,
+ overflow: 'hidden'
+ })
+ .hide();
+ }
+
this.features
.each(function(idx) {
var featured = $(this);
@@ -65,14 +82,18 @@
this.currentIdx = idx;
this.showing.addClass(this.settings.featuredClass);
- if (this.featureContainer)
- this.featureContainer.html(this.showing.data('featured'));
+ if (this.featureContainer) {
+ if (this.transitionContainer)
+ this.transitionTo(this.showing.data('featured'));
+ else
+ this.featureContainer.html(this.showing.data('featured'));
+ }
},
start: function() {
var self = this;
- self.running = true;
- self.interval = setTimeout(function() { self.next(); }, self.settings.displayTime * 1000);
+ this.running = true;
+ this.interval = setTimeout(function() { self.next(true); }, this.settings.displayTime * 1000);
},
stop: function() {
@@ -81,8 +102,8 @@
},
restart: function() {
- if (self.settings.autoReStart)
- self.start();
+ if (this.settings.autoReStart)
+ this.start();
},
next: function(override) {
@@ -93,9 +114,21 @@
this.show(idx);
- if (this.running)
+ if (this.running || override)
this.start();
}
+ },
+
+ transitionTo: function(html) {
+ var self = this;
+ this.transitionContainer
+ .hide()
+ .html(html)
+ .appendTo(this.featureContainer);
+
+ this.transitionContainer[this.settings.transition](this.settings.transitionSpeed, function() {
+ self.featureContainer.html(html);
+ });
}
});
})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.