make generic fade animation css class

4 files changed, 30 insertions, 19 deletions

diff --git a/examples/assets/js/bootstrap-alerts.js b/examples/assets/js/bootstrap-alerts.js
index d1983d9f7..f6a5f9711 100644
--- a/examples/assets/js/bootstrap-alerts.js
+++ b/examples/assets/js/bootstrap-alerts.js
@@ -51,11 +51,11 @@
         that.$element = null
       }
 
-      $.support.transition ?
+      $.support.transition && this.$element.hasClass('fade') ?
         this.$element.bind(transitionEnd, removeElement) :
         removeElement()
 
-      this.$element.removeClass('show')
+      this.$element.removeClass('in')
     }
 
   }
diff --git a/examples/assets/js/bootstrap-modal.js b/examples/assets/js/bootstrap-modal.js
index 0b13fdf58..8e782a37e 100644
--- a/examples/assets/js/bootstrap-modal.js
+++ b/examples/assets/js/bootstrap-modal.js
@@ -55,17 +55,19 @@
       var that = this
       this.isOpen = true
 
+      this.$element = $(this.settings.content)
+
       _.escape.call(this)
       _.backdrop.call(this)
 
-      this.$element = $(this.settings.content)
+      this.$element
         .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() })
         .appendTo(document.body)
         .show()
 
       setTimeout(function () {
-        that.$element.addClass('show')
-        that.$backdrop && that.$backdrop.addClass('show')
+        that.$element.addClass('in')
+        that.$backdrop && that.$backdrop.addClass('in')
       }, 1)
 
       return this
@@ -79,14 +81,14 @@
       _.escape.call(this)
       _.backdrop.call(this)
 
-      this.$element.removeClass('show')
+      this.$element.removeClass('in')
 
       function removeElement () {
         that.$element.remove()
         that.$element = null
       }
 
-      $.support.transition ?
+      $.support.transition && this.$element.hasClass('fade') ?
         this.$element.bind(transitionEnd, removeElement) :
         removeElement()
 
@@ -103,19 +105,20 @@
 
     backdrop: function () {
       var that = this
+        , animate = this.$element.hasClass('fade') ? 'fade' : ''
       if ( this.isOpen && this.settings.backdrop ) {
-        this.$backdrop = $('<div class="modal-backdrop" />')
+        this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
           .click(function () { that.close() })
           .appendTo(document.body)
       } else if ( !this.isOpen && this.$backdrop ) {
-        this.$backdrop.removeClass('show')
+        this.$backdrop.removeClass('in')
 
         function removeElement() {
           that.$backdrop.remove()
           that.$backdrop = null
         }
 
-        $.support.transition ?
+        $.support.transition && this.$element.hasClass('fade')?
           this.$backdrop.bind(transitionEnd, removeElement) :
           removeElement()
       }
diff --git a/examples/assets/js/bootstrap-twipsy.js b/examples/assets/js/bootstrap-twipsy.js
index 4047f910d..2d17796e1 100644
--- a/examples/assets/js/bootstrap-twipsy.js
+++ b/examples/assets/js/bootstrap-twipsy.js
@@ -54,6 +54,11 @@
       if (this.getTitle() && this.enabled) {
         $tip = this.tip()
         this.setContent()
+
+        if (this.options.animate) {
+          $tip.addClass('fade')
+        }
+
         $tip
           .remove()
           .css({ top: 0, left: 0, display: 'block' })
@@ -86,7 +91,7 @@
         $tip
           .css(tp)
           .addClass(placement)
-          .addClass('show')
+          .addClass('in')
       }
     }
 
@@ -100,13 +105,13 @@
       var that = this
         , $tip = this.tip()
 
-      $tip.removeClass('show')
+      $tip.removeClass('in')
 
       function removeElement () {
         $tip.remove()
       }
 
-      $.support.transition ?
+      $.support.transition && this.$tip.hasClass('fade') ?
         $tip.bind(transitionEnd, removeElement) :
         removeElement()
     }
@@ -264,7 +269,8 @@
   $.fn.twipsy.Twipsy = Twipsy
 
   $.fn.twipsy.defaults = {
-    delayIn: 0
+    animate: true
+  , delayIn: 0
   , delayOut: 0
   , fallback: ''
   , placement: 'above'
diff --git a/examples/bootstrap-js.html b/examples/bootstrap-js.html
index c8d5db647..3e9f39e63 100644
--- a/examples/bootstrap-js.html
+++ b/examples/bootstrap-js.html
@@ -95,7 +95,7 @@
           </ul>
           <h3>Methods</h3>
           <h4>$().modal</h4>
-          <p>Returns an instance of the modal class. Accepts an optional options <code>object</code>.</p>
+          <p>Returns an instance of the modal class. Accepts an optional options <code>object</code>. If you want your modal to fade in and out, just add a <code>.fade</code> class to your <code>.modal</code> element (refer to the demo to see this in action).</p>
 <pre class="prettyprint linenums">
 $('#modal-content').modal({
   closeOnEscape: true
@@ -112,7 +112,7 @@ $('#modal-content').modal({
           <h3>Demo</h3>
 
           <!-- sample modal content -->
-          <div id="modal-from-dom" class="modal hide">
+          <div id="modal-from-dom" class="modal hide fade">
             <div class="modal-header">
               <h3>Modal Heading</h3>
               <a href="#" class="close">&times;</a>
@@ -163,13 +163,13 @@ $('#modal-content').modal({
           <pre class="prettyprint linenums">$(".alert-message").alert()</pre>
           <h3>Methods</h3>
           <h4>$().alert</h4>
-          <p>Wraps all alerts with close functionality.</p>
+          <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
           <h3>Demo</h3>
-          <div class="alert-message show warning">
+          <div class="alert-message warning fade in">
             <a class="close" href="#">&times;</a>
             <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
           </div>
-          <div class="alert-message show block-message error">
+          <div class="alert-message block-message error fade in">
             <a class="close" href="#">&times;</a>
             <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
             <div class="alert-actions">
@@ -202,6 +202,7 @@ $('#modal-content').modal({
           <pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
           <h3>Options</h3>
           <ul>
+            <li><strong>animate</strong> (<code>boolean</code>) - apply a css fade transition to the tooltip.</li>
             <li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li>
             <li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li>
             <li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li>
@@ -248,6 +249,7 @@ $('#modal-content').modal({
           <pre class="prettyprint linenums">$('#example').popover(options)</pre>
           <h3>Options</h3>
           <ul>
+            <li><strong>animate</strong> (<code>boolean</code>) - apply a css fade transition to the popover.</li>
             <li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li>
             <li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li>
             <li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li>