3
Simple, usa el método nativo de javascript setInterval, ejecutará todo lo que le pongas dentro de la función que recibe como primer párametro cada N milisegundos que le indiques en su segundo párametro:
setInterval(function(){
console.log('Hola, soy una animación, wii!');
}, 5000); // 5000 milisegundos = 5 segundos
Para tu código sería algo ...
respondida el 18 abr. 17 a las 20:54
Jorius
6,06388 medallas de oro2525 medallas de plata5555 medallas de bronce
3
El problema es que estas bindeando una sola variable del componente a todos los tags "img", al cambiar el valor de esa variable, afecta a todos por igual.
Hay varias soluciones posibles:
Crear un componente para cada "img" y recibís el @Input de un objeto About y manejas el "hover" del mouse en ese componente.
Utilizás los eventos "mouseenter" y "...
3
Usando Firefox v59.0 (64bits) on Windows 10 lo que pude ver es que al hacer clic sobre el elemento <div class="animated-icon1" no ocurre nada, este se debe a que el elemento no es clicable.
Solución:
Si el evento click lo suscribimos al <button, todo funciona correctamente.
Código:
$(function() {
//Animación icono menú.
$('#button').click(...
respondida el 15 mar. 18 a las 14:16
Marcos
26.2k66 medallas de oro2424 medallas de plata5858 medallas de bronce
2
No hay una forma nativa en CSS para hacer esto, la única opción es escuchar el evento scroll y hacerlo a mano.
Otra cosa que debes saber es como calcular donde estas y las dimensiones de la ventana para poder calcular la posicion del elemento a animar:
$(window).scrollTop() te el numero de linea de la primer linea visible. Es decir, que si hay 600 pixels ...
respondida el 19 abr. 17 a las 13:31
rnrneverdies
16.4k22 medallas de oro4343 medallas de plata7979 medallas de bronce
2
Si estás utilizando jQuery, pon un escucha en el evento:
$(window).on("scroll", function(evt) { ... });
Es decir:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
// Hacer el 'espacio'
var $div = $("#text-div");
for (var i = 1; i <= 100; i++) {
...
respondida el 18 abr. 17 a las 22:34
Paul Vargas
6011 medalla de oro2020 medallas de plata3939 medallas de bronce
2
Una forma para que realmente estes esperando a que termine la animación para comenzar de nuevo, sería la siguiente:
Ejecutar una animación infinitas
Crear una función (eg: animateSkillbar) para ejecutar la animación
Luego utilizar la opción complete ("Una función que se llama una vez que la animación de un elemento está completa") e indicamos que queremos ...
respondida el 18 abr. 17 a las 21:38
Marcos
26.2k66 medallas de oro2424 medallas de plata5858 medallas de bronce
1
Usando estas clases puedes hacer que un elemento aparezca con un fade y trasladándose hacia la izquierda, con el cambio de la variable "showItem" que tengas en tu "data".
.fadeInLeft-enter-active {
transition: all .3s ease;
}
.fadeInLeft-leave-active {
transition: all .8s ease-in-out;
}
.fadeInLeft-enter, . fadeInLeft-leave-to {
transform: translateX(-...
1
te dejo un ejemplo sencillo, pruébalo con el scroll
$(document).ready(function() {
$('#animacion').hide(0);
$(window).scroll(function(){
var windowHeight = $(window).scrollTop();
var cont2 = $("#div2").offset();
cont2 = cont2.top;
if(windowHeight >= cont2 ){
$('#animacion').fadeIn(4500);
}else{
$('#...
respondida el 30 dic. 16 a las 0:41
hubman
2,98266 medallas de oro2929 medallas de plata6060 medallas de bronce
Solo están habilitadas las respuestas de wiki más votadas con una longitud mínima y que no pertenecen a la comunidad
Etiquetas relacionadas
animated × 10javascript × 4
jquery × 4
scroll × 3
html5 × 2
angularjs × 2
html × 1
css × 1
ajax × 1
angular × 1
css3 × 1
vue.js × 1
typescript × 1
react-native × 1
menú × 1
jquery-ui × 1
firefox × 1
transacciones × 1
css-transform × 1
animate.css × 1