jQuery "efecto de resaltado parpadeante" en div?

Question

Estoy buscando una manera de hacer lo siguiente.

Agrego un <div> a una página, y una devolución de llamada ajax devuelve algún valor. El <div> está lleno de valores de la llamada ajax, y el <div> se antepone a otro <div>, que actúa como columna de la tabla.

Me gustaría llamar la atención del usuario, para mostrarle que hay algo nuevo en la página.
Quiero que el <div> parpadee, no se muestre/se oculte, pero para resaltar/des-iluminar durante un tiempo, digamos 5 segundos.

He estado mirando el complemento blink, pero hasta donde puedo verlo solo se muestra/oculta en un elemento.

Por cierto, la solución tiene que ser de navegador cruzado, y sí, IE lamentablemente incluido. Probablemente tenga que hackear un poco para que funcione en IE, pero en general tiene que funcionar.

Answer 1

jQuery UI Highlight Effect es lo que estás buscando.

$("div").click(function() { 
     $(this).effect("highlight", {}, 3000); 
}); 

La documentación y de demostración se pueden encontrar here

Editar

Tal vez el efecto pulsan es más apropiado, consulte here

Edición # 2

Para ajustar el op acity usted podría hacer esto:

$("div").click(function() { 
    // do fading 3 times 
    for(i=0;i<3;i++) { 
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0); 
    } 
}); 

Así que no será inferior al 50% de opacidad.

Answer 2

Es posible que desee examinar jQuery UI. En concreto, el efecto más destacado:

http://jqueryui.com/demos/effect/

Answer 3

Tome un vistazo a http://jqueryui.com/demos/effect/. Tiene un efecto llamado pulsate que hará exactamente lo que quieras.

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");}); 

Answer 4

Para aquellos que no quieren incluir la totalidad de jQuery UI, puede utilizar jQuery.pulse.js lugar.

Tener La animación de cambiar la opacidad, hacer esto:

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5}); 

Es ligero (menos de 1 kb), y que permite al bucle de cualquier tipo de animaciones.

Answer 5

Si no desea la sobrecarga de jQuery UI, recientemente escribí una solución recursiva usando .animate(). Puede personalizar los retrasos y colores según lo necesite.

function doBlink(id, count) { 
    $(id).animate({ backgroundColor: "#fee3ea" }, { 
     duration: 100, 
     complete: function() { 

      // reset 
      $(id).delay(100).animate({ backgroundColor: "#ffffff" }, { 
       duration: 100, 
       complete: function() { 

        // maybe call next round 
        if(count > 1) { 
         doBlink(id, --count); 
        } 
       } 
      }); 

     } 
    }); 
} 

Por supuesto, usted necesitará el plug-in de color para obtener backgroundColor trabajar con .animate(). https://github.com/jquery/jquery-color

Y para proporcionar un poco de contexto así es como lo llamé. Necesitaba desplazar la página a mi div de destino y luego parpadear.

$(window).load(function(){ 
    $('html,body').animate({ 
     scrollTop: $(scrollToId).offset().top - 50 
    }, { 
     duration: 400, 
     complete: function() { doBlink(scrollToId, 5); } 
    }); 
}); 

Answer 6

Creo que podría utilizar una respuesta similar que di. Puede encontrarlo aquí ... https://stackoverflow.com/a/19083993/2063096

• debería funcionar en todos los navegadores, ya que solo Javascript y jQuery.

Nota: Esta solución NO utiliza jQuery UI, también hay un violín para que pueda jugar a su gusto antes de implementarlo en su código.

Answer 7

Este es un efecto de parpadeo a medida que creé, que utiliza setInterval y fadeTo

HTML -

<div id="box">Box</div> 

JS -

setInterval(function(){blink()}, 1000); 


    function blink() { 
     $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0); 
    } 

Tan simple como se pone.

http://jsfiddle.net/Ajey/25Wfn/

Answer 8

utilizo diferentes colores predefinidos, así:

theme = { 
    whateverFlashColor: '#ffffaa', 
    whateverElseFlashColor: '#bbffaa', 
    whateverElseThenFlashColor: '#ffffff', 
}; 

y utilizarlos como esto

$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000); 

fácil :)

Answer 9

acaba de dar elem.fadeOut (10) .fadeIn (10);

Answer 10

Si no está utilizando la biblioteca jQuery UI y quiere imitar el efecto de lo que puede hacer es muy simple

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100); 

también se puede jugar con los números para obtener una más rápida o más lenta para adaptarse mejor a tu diseño

Esto también puede ser una función jquery global para que pueda usar el mismo efecto en todo el sitio. También tenga en cuenta que si coloca este código en un ciclo for, puede tener impulsos de 1 milion, por lo tanto, no está restringido al valor predeterminado 6 ni a la cantidad predeterminada.

Answer 11

Pruebe con jquery.blink.js plugin:

https://github.com/webarthur/jquery-blink

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="/path/to/jquery.blink.js"></script> 

<script> 
jQuery('span').blink({color:'white'}, {color:'black'}, 50); 
</script> 

#enjoy!

Answer 12

<script> 
$(document).ready(function(){ 
    var count = 0; 
    do { 
     $('#toFlash').fadeOut(500).fadeIn(500); 
     count++; 
    } while(count < 10);/*set how many time you want it to flash*/ 
}); 
</script 

Answer 13

Compruébelo usted mismo -

<input type="button" id="btnclick" value="click" /> 
var intervalA; 
     var intervalB; 

     $(document).ready(function() { 

      $('#btnclick').click(function() { 
       blinkFont(); 

       setTimeout(function() { 
        clearInterval(intervalA); 
        clearInterval(intervalB); 
       }, 5000); 
      }); 
     }); 

     function blinkFont() { 
      document.getElementById("blink").style.color = "red" 
      document.getElementById("blink").style.background = "black" 
      intervalA = setTimeout("blinkFont()", 500); 
     } 

     function setblinkFont() { 
      document.getElementById("blink").style.color = "black" 
      document.getElementById("blink").style.background = "red" 
      intervalB = setTimeout("blinkFont()", 500); 
     } 

    </script> 

    <div id="blink" class="live-chat"> 
     <span>This is blinking text and background</span> 
    </div> 

Answer 14

Dado que no veo ninguna solución a base de jQuery que no requieren bibliotecas adicionales aquí es muy simple que es un poco más flexibles que las usando fadeIn/fadeOut.

$.fn.blink = function (count) { 
    var $this = $(this); 

    count = count - 1 || 0; 

    $this.animate({opacity: .25}, 100, function() { 
     $this.animate({opacity: 1}, 100, function() { 
      if (count > 0) { 
       $this.blink(count); 
      } 
     }); 
    }); 
}; 

utilizar de esta manera

$('#element').blink(3); // 3 Times.