Jquery Opacity Fade In Out Loop

Uno de mis clientes me pidió que hiciera un parpadeo en un div. Creo que tal vez no sea lo mejor para él, quizás la luz que se desvanezca y desaparezca de la opacidad atraerá la atención de sus clientes, sin molestarlos.Jquery Opacity Fade In Out Loop

Actualmente tengo

<a class="special_button" href="#">Special Offers &rsaquo;</a>

tengo el siguiente código para otro div, lo que provoca un desvanecimiento en la carga del navegador:

$('.logo-top').delay(700).animate({ 
    'opacity' : '1',   
    'top' : '+=40px' 
}, { duration: 700, easing: 'swing' });

¿Cómo puedo hacer algo similar para el special_button, pero en lugar de bucle de la opacidad? ¿De 80 a 100?

Incluso sería mejor si en bucle una cierta cantidad de veces, tal vez como 5.

mejor, Stepan

Fuente

2012-10-05 Stepan Parunashvili

es probable que desee tener algo como esto jsFiddle.

Y también puede indicar el número de veces que desea que este parpadee, simplemente manteniendo un contador.

Código de jsFiddle:

$(document).ready(function() { 
    function runIt() {   
     var baloon = $('#baloon'); 
     baloon.animate({opacity:'1'}, 1000); 
     baloon.animate({opacity:'0.5'}, 1000, runIt); 
    } 
    runIt(); 
});

Fuente

2012-10-05 06:05:25

¡Hola Ulan, esto funcionó de manera excelente! Gracias por la ayuda. Salió mucho mejor de lo que hubiera pensado. –

Estos valores no son necesarios (''+ = 1'' y'' - = 0.5'') porque la opacidad nunca puede ser mayor que '1' ni menor que' 0'. Un simple ''1'' y' '0.5'' debería ser suficiente. –

Acabo de buscar y tropecé con esto. Gracias, esto es exactamente lo que necesitaba. –

Usted puede hacerlo de esta manera;

(function() { 
    var cnt = 0; 
    var specials = $(".special_button"); 

    function next() { 
     if (cnt < 5) { 
      specials.fadeTo(2000, .1).fadeTo(2000, 1, next); 
      ++cnt; 
     }      
    } 

    next(); 
})();

demostración de trabajo: http://jsfiddle.net/jfriend00/558GY/

su información, la diferencia entre el 80% y el 100% de opacidad es bastante sutil. Hice la diferencia mucho mayor en la demostración. Obviamente puedes sintonizar el efecto que quieras.

Fuente

2012-10-05 06:34:33 jfriend00

¡Muy interesante! Mostraré esta demostración al cliente también. Gracias jfriend :) –

Por lo que yo entiendo quieres algo intermitente aquí sus:

$("document").ready(function() { 
    anm(".special_button"); 
}); 
function anm(element) { 
    $(element).delay(200).animate({ opacity: 'toggle' }, 1000, function() { anm(element); }); 
}

de demostración: http://jsfiddle.net/BerkerYuceer/GdcRs/

Fuente

2012-10-05 06:54:29

por qué no utilizar fotogramas clave CSS3?

.twinkle { 
 
    background: red; 
 
    padding: 0.2em; 
 
    margin: 50px; 
 
} 
 

 
@-webkit-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-moz-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-ms-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
.twinkle { 
 
    -webkit-animation: twinkly 1s alternate infinite; 
 
    -moz-animation: twinkly 1s alternate infinite; 
 
    -ms-animation: twinkly 1s alternate infinite; 
 
    animation: twinkly 1s alternate infinite; 
 
}

<span class="twinkle">Special Offers &rsaquo;</span>

Se puede utilizar una reserva para navegadores antiguos continuación. Cualquiera de los guiones que el otro propuso son buenos, pero recomendaría la solución de Ulan.

Fuente

2012-10-05 07:00:06

Y acabas de nivelar mi CSS3 :). Gracias Bram –

@StepanParunashvili ¡No hay problema! –

si te gusta el código corto, entonces usas el plugin jquery-timing para sincronizar cosas en jQuery. se encoge su código completa a:

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$);

Ah, y cuando lo desee para alternar un número específico de veces (por ejemplo 20), entonces se escribe

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$).until(20);

fresca, eh?

Fuente

2012-10-05 14:25:38 peter

Respuesta

Cuestiones relacionadas