Changeset 23853

Timestamp:

03/29/2013 07:06:21 AM (11 years ago)

Author:

markjaquith

Message:

Use jQuery.on() properly. Add some slideUp()/slideDown() transitions to ease post format switches. see #19570

Location:

trunk/wp-admin

Files:

• includes/post-formats.php (modified) (1 diff)
• js/post-formats.js (modified) (3 diffs)

trunk/wp-admin/includes/post-formats.php

@@ -5 +5 @@
 ?>
 <div class="post-format-description"></div>
-<div class="post-formats-fields edit-form-section">
+<div class="post-formats-fields">
 
     <input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />

trunk/wp-admin/js/post-formats.js

@@ -4 +4 @@
     var mediaFrame, lastMimeType, lastMenu, mediaPreview;
     $(function(){
+        var $container = $( '.post-formats-fields' );
+
         // Post formats selection
-        $('.post-format-options a').on( 'click', function(e){
+        $('.post-format-options').on( 'click', 'a', function(e){
             var $this = $(this), editor, body,
                 parent = $this.parent(),
@@ -17 +19 @@
             $('#post_format').val(format);
 
-            container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/, '' );
-            container.addClass('wp-format-' + format);
+            $container.slideUp( 200, function(){
+                container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/, '' );
+                container.addClass('wp-format-' + format);
+                $container.slideDown( 400 );
+            });
+
             $('#title').focus();
 
@@ -40 +46 @@
 
             e.preventDefault();
-        }).on('mouseenter focusin', function () {
+        }).on('mouseenter focusin', 'a', function () {
             $('.post-format-tip').html( $(this).prop('title') );
-        }).on('mouseleave focusout', function () {
+        }).on('mouseleave focusout', 'a', function () {
             $('.post-format-tip').html( $('.post-format-options a.active').prop('title') );
         });