Browse Source

Add CSS transition support

When supported, the fading will be done using CSS transitions. Requires Modernizr to check for support.
pull/89/head
Manduro 12 years ago
parent
commit
34ae23f28c
  1. 47
      responsiveslides.js

47
responsiveslides.js

@ -72,21 +72,33 @@
// Fading animation // Fading animation
slideTo = function (idx) { slideTo = function (idx) {
settings.before(); settings.before();
$slide if (typeof Modernizr == "object" && Modernizr.csstransitions) {
.stop() $slide
.fadeOut(fadeTime, function () { .removeClass(visibleClass)
$(this) .eq(idx)
.removeClass(visibleClass) .addClass(visibleClass)
.css(hidden); .delay(fadeTime)
}) .each(function () {
.eq(idx) settings.after();
.fadeIn(fadeTime, function () { index = idx;
$(this) });
.addClass(visibleClass) } else {
.css(visible); $slide
settings.after(); .stop()
index = idx; .fadeOut(fadeTime, function () {
}); $(this)
.removeClass(visibleClass)
.css(hidden);
})
.eq(idx)
.fadeIn(fadeTime, function () {
$(this)
.addClass(visibleClass)
.css(visible);
settings.after();
index = idx;
});
}
}; };
// Random order // Random order
@ -118,6 +130,11 @@
.css(visible) .css(visible)
.show(); .show();
// Necessary when using css transitions
if (typeof Modernizr == "object" && Modernizr.csstransitions) {
$slide.css({"display": "block"});
}
// Only run if there's more than one slide // Only run if there's more than one slide
if ($slide.size() > 1) { if ($slide.size() > 1) {

Loading…
Cancel
Save