Mostrando entradas con la etiqueta resaltado de texto animate. Mostrar todas las entradas
Mostrando entradas con la etiqueta resaltado de texto animate. Mostrar todas las entradas

jueves, 26 de julio de 2012

jQuery: mi primer Plugin 'resaltado de texto con jquery'

$.fn.resaltar= function(options){  

        var opts = $.extend({}, $.fn.resaltar.defaults, options);    
        
        this.each(function(){    
            
            //console.log(this);
            //$(this).css({'background':'rgba(255, 0, 0, .4)'});  //SI
                          
            (function(self){
               var t = 1; 
               var sube =true;
                                
              var timer = setInterval(function(){    
                     // console.log(self) 
                      
                    //$(self).css({'background':'rgba(255, 0, 0, .4)'});        //si
                          
                  //var color = 'rgba(255, 0, 0, .'+t+')'; //comun
                  var color = 'rgba('+opts.r+', '+opts.g+', '+opts.b+', .'+t+')'; 
                  
                  
                  
                 //$(this).css({'background': color}); // NO ANDA!!
                  $(self).css({'background': color}); //SIII
                    //console.log("asdsa", t, sube, color)
                        
                    if(sube) t++;
                       else t--;
                        
                    if(sube && t==9) sube = false;    
                  if(!sube && t==-1) clearInterval(timer)           
                   
                    
                },50);
                      
            })(this);
                  
                  
        });        
    };  
       
    $.fn.resaltar.defaults = {  
        // para el fondo un color por defecto  
        r: '255',
        g: '0',
        b  : '0'
    };  

/*----------------------------*/
//$("#test1").resaltar();  

$("#my").click(function(){
     $("#test1").resaltar();  
    $("#test2").resaltar({r:'0',g:'255',b:'0'});  
});

test rck:
http://jsfiddle.net/ric47121/sUnKf/6/

test Online:
http://ricardolevano.com.ar/test/test_resaltado_jquery_by_rck/test1.html