From 34ae23f28c64c1af43ab6bd52404acd194fccb8b Mon Sep 17 00:00:00 2001
From: Manduro <jobvanstiphout@filternet.nl>
Date: Thu, 8 Nov 2012 13:54:20 +0100
Subject: [PATCH] Add CSS transition support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When supported, the fading will be done using CSS transitions. Requires Modernizr to check for support.
---
 responsiveslides.js | 47 ++++++++++++++++++++++++++++++---------------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/responsiveslides.js b/responsiveslides.js
index d6ef35d..5d3090c 100644
--- a/responsiveslides.js
+++ b/responsiveslides.js
@@ -72,21 +72,33 @@
         // Fading animation
         slideTo = function (idx) {
           settings.before();
-          $slide
-            .stop()
-            .fadeOut(fadeTime, function () {
-              $(this)
-                .removeClass(visibleClass)
-                .css(hidden);
-            })
-            .eq(idx)
-            .fadeIn(fadeTime, function () {
-              $(this)
-                .addClass(visibleClass)
-                .css(visible);
-              settings.after();
-              index = idx;
-            });
+          if (typeof Modernizr == "object" && Modernizr.csstransitions) {
+            $slide
+          		.removeClass(visibleClass)
+          		.eq(idx)
+          		.addClass(visibleClass)
+          		.delay(fadeTime)
+          		.each(function () {
+	          		settings.after();
+	          		index = idx;
+          		});
+          } else {
+            $slide
+              .stop()
+              .fadeOut(fadeTime, function () {
+                $(this)
+                  .removeClass(visibleClass)
+                  .css(hidden);
+              })
+              .eq(idx)
+              .fadeIn(fadeTime, function () {
+                $(this)
+                  .addClass(visibleClass)
+                  .css(visible);
+                settings.after();
+                index = idx;
+              });
+          }
         };
 
       // Random order
@@ -118,6 +130,11 @@
         .css(visible)
         .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
       if ($slide.size() > 1) {