Tengo muchos div, cada vez que hago alguno de los div, su contenido se copia en el div más alto, pero quiero resaltar el div más alto, ¿cómo puedo hacerlo usando jQuery?
Código:
<div id="code"> </div> <div id="1">Click Me</div> <div id="2">Click Me, please</div>Cuando hago clic en div con id 1 o 2, su contenido se copia en div con id de "código", pero necesito resaltar durante unos segundos, para poder notificar al usuario que algo ha cambiado.
Hay una manera simple de lograr esto usando CSS y jQuery también. Mira esto,
CSS
@keyframes highlight { 0% { background: #ffff99; } 100% { background: none; } } .highlight { animation: highlight 2s; }jQuery:
function highlight(){ $('#YourElement').addClass("highlight"); setTimeout(function () { $('#YourElement').removeClass('highlight'); }, 2000); } Utilice la función de highlight() en sus eventos.
Si está utilizando jQuery UI, puede hacer esto:
$('#code').effect('highlight',{},3000); // three seconds Por separado, sus identificaciones en esos dos elementos inferiores no son válidas. No puede comenzar una identificación con un número (excepto, como señala Vivek, en HTML5). En lugar de 1 o 2 , use algo con algún valor semántico, como answer1 o article1 .
Editar: aquí se explica cómo hacerlo usando su HTML actual, incluido un controlador de clics para los divs:
$('#a1,#a2').click( function(){ $('#code') .html( $.trim( $(this).text() ) ) .effect('highlight',{},1000); });Aquí está en acción: http://jsfiddle.net/redler/KrhHs/