highlight element after update, fix #245

src/element/editable-element.css

@@ -28,6 +28,14 @@ a.editable-click.editable-disabled:hover {
 /*    content: '*'*/
 }
 
+.editable-bg-transition {
+  -webkit-transition: background-color 1400ms ease-in;
+  -moz-transition: background-color 1400ms ease-in;
+  -o-transition: background-color 1400ms ease-in;
+  -ms-transition: background-color 1400ms ease-in;
+  transition: background-color 1400ms ease-in;  
+}
+
 /*see https://github.com/vitalets/x-editable/issues/139 */
 .form-horizontal .editable
 { 

src/element/editable-element.js

@@ -16,6 +16,11 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         } else {
             this.init();
         }
+        
+        //check for transition support
+        if(this.options.highlight && !$.fn.editableutils.supportsTransitions()) {
+            this.options.highlight = false;
+        }
     };
 
     Editable.prototype = {
@@ -382,6 +387,21 @@ Makes editable any HTML element on the page. Applied as jQuery method.
                 }
             }
             
+            //highlight when saving
+            if(this.options.highlight) {
+                var $e = this.$element,
+                    $bgColor = $e.css('background-color');
+                    
+                $e.css('background-color', this.options.highlight);
+                setTimeout(function(){
+                    $e.css('background-color', $bgColor);
+                    $e.addClass('editable-bg-transition');
+                    setTimeout(function(){
+                       $e.removeClass('editable-bg-transition');  
+                    }, 1500);
+                }, 0);
+            }
+            
             //set new value
             this.setValue(params.newValue, false, params.response);
             
@@ -761,7 +781,16 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         });
         </script>
         **/         
-        selector: null        
+        selector: null,
+        /**
+        Color used to highlight element after update. Implemented via CSS3 transition, works in modern browsers.
+        
+        @property selector 
+        @type string|boolean
+        @since 1.4.5        
+        @default #FFFF80 
+        **/
+        highlight: '#FFFF80'        
     };
     
 }(window.jQuery));