done #2192 @2

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 6553d8367a61429186d77d8c513335e338b9d186..3655953d954734ddf30c528abb1f402f42b34d22 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -507,6 +507,9 @@ Fluidbook.prototype = {
             duration = animationDuration * 0.3;
         }
 
+        var transitionIn = {transitionDuration: duration + 'ms', transitionDelay: delay + 'ms'};
+        var transitionOut = {transitionDuration: (duration * .5) + 'ms', transitionDelay: '0ms'};
+
         var left = true, right = true;
         if (this.displayOnePage) {
             right = true;
@@ -521,16 +524,17 @@ Fluidbook.prototype = {
         var s = $("#shadow,#edges");
 
         if (left) {
-            $(s).children(".left:hidden").delay(delay).fadeIn(duration);
+            $(s).children(".left.hidden").css(transitionIn).removeClass('hidden');
         } else {
-            $(s).children(".left:visible").fadeOut(duration);
+            $(s).children(".left:not('.hidden')").css(transitionOut).addClass('hidden');
         }
 
         if (right) {
-            $(s).children(".right:hidden").delay(delay).fadeIn(duration);
+            $(s).children(".right.hidden").css(transitionIn).removeClass('hidden');
         } else {
-            $(s).children(".right:visible").fadeOut(duration);
+            $(s).children(".right:not('.hidden')").css(transitionOut).addClass('hidden');
         }
+
     },
     showAllButtons: function () {
         $("#next,#previous").addClass('help').show();

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 5defefa120ee4779ff528365e6482d18f242ed64..ace94e245190d18cddabad5caed15d892a3ea2f9 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -394,6 +394,7 @@ body, html {
                position: absolute;
                left: 0;
                opacity: @shadow-opacity;
+               .shadowedge-fade-item();
 
                &.bottom {
                        bottom: -@shadow-height+@shadow-offset;
@@ -464,6 +465,7 @@ body, html {
        @edge-scale: 1;
 
        > .edge {
+               .shadowedge-fade-item();
                position: absolute;
                top: 0;
                height: 100%;

diff --git a/style/mixins.less b/style/mixins.less
index 493f641c51b04cafc0fe998580c95d47ca2782d3..ae1e82c4ad3cc9ce4756f2e7c9ec527e0804bacd 100644 (file)
--- a/style/mixins.less
+++ b/style/mixins.less
@@ -50,10 +50,17 @@
                }
        }
 
-       .chapters{
-               a:hover{
+       .chapters {
+               a:hover {
 
                        background-color: @button;
                }
        }
+}
+
+.shadowedge-fade-item() {
+       transition-property: opacity;
+       &.hidden {
+               opacity: 0;
+       }
 }
\ No newline at end of file