fix css3 transitions for jQuery show/hide

need to ensure that the element always has the 
class name applied so the css animation takes effect.

Change-Id: I26d9dbcbce8520f12223d293278bf197dabf8b53
Reviewed-on: https://gerrit.instructure.com/5470
Tested-by: Hudson <hudson@instructure.com>
Reviewed-by: Zach Wily <zach@instructure.com>

public/javascripts/instructure_helper.js

@@ -140,7 +140,7 @@ I18n.scoped('instructure', function(I18n) {
               var $this = $(this);
               // if you can't add the class .use-css-transitions-for-show-hide to your element, you can
               // add it to this selector to have it use css3 transitions.
-              if ($this.is('.use-css-transitions-for-show-hide, .webkit .ui-widget-overlay')) {
+              if ($this.is('.use-css-transitions-for-show-hide, .ui-widget-overlay')) {
                 var oldOpacityCssAttribute = this.style.opacity,
                     oldComputedOpacity = $this.css('opacity'),
                     newOpacity = (showHideOrRemove === 'hide' || showHideOrRemove === 'remove') ? 0 : (!oldComputedOpacity || oldComputedOpacity == "0" ? 1 : oldComputedOpacity);
@@ -148,6 +148,10 @@ I18n.scoped('instructure', function(I18n) {
                   this.style.opacity = 0;
                   previousFn.apply($this); //change out of display:none
                 }
+                
+                // things like '.ui-widget-overlay' may not already have this class,
+                // it is needed in the css to tell the browser to use the animation.
+                $this.addClass('use-css-transitions-for-show-hide');
                 $this.bind('transitionend oTransitionEnd webkitTransitionEnd', function(event){
                   if (event.originalEvent.propertyName === 'opacity') {
                     previousFn.apply($(this)); //change to display:none when we are hiding.

public/stylesheets/static/jquery-ui-theme.css

@@ -501,8 +501,8 @@
 
 
 .use-css-transitions-for-show-hide {
-  -webkit-transition: opacity 1.5s;
-  -moz-transition: opacity 1.5s;
-  -o-transition: opacity 1.5;
-  transition: opacity 1.5s;
+  -webkit-transition: opacity 0.5s;
+  -moz-transition: opacity 0.5s;
+  -o-transition: opacity 0.5;
+  transition: opacity 0.5s;
 }