Animating shorthand CSS properties with jQuery
        Posted  
        
            by 
                Giulio Piancastelli
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Giulio Piancastelli
        
        
        
        Published on 2011-05-21T11:54:04Z
        Indexed on 
            2012/03/25
            17:29 UTC
        
        
        Read the original article
        Hit count: 330
        
jQuery
Chapter 3 of jQuery Novice to Ninja starts with a section about animating CSS properties, and its first example suggests the following code should expand padding and add a couple of borders to every paragraph in a page:
$('document').ready(function() {
  $('p').animate({
    padding: '20px',
    borderBottom: '3px solid #8f8f8f',
    borderRight: '3px solid #bfbfbf'
  }, 2000);
});
However, while the code indeed works with the jQuery 1.4 library included in the downloadable examples archive for the book, it only animates padding when used alongside jQuery 1.6, forgetting the shorthand CSS properties for border-bottom and border-right altogether.
What happened in the transition between 1.4 and 1.6, causing the removal of this functionality? Has it been placed in some plugin? Is it possible to run this code as it's written and get back the border animation? If not, how would you animate border properties using jQuery 1.6?
© Stack Overflow or respective owner