0
234
Views¿Cómo puedo cambiar una imagen cuando el usuario se desplaza hacia abajo?
Puedo animar fácilmente al desplazarme hacia abajo en imágenes en formato png y jpg fácilmente, pero cuando me desplazo hacia abajo en imágenes gif, se anima repetidamente cuando me desplazo hacia abajo más.
este es el script que uso
<script type="text/javascript"> $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 10) { $('.navbar-brand-img img').attr('src','asserts/images/innvert.gif'); } if ($(this).scrollTop() < 49) { $('.navbar-brand-img img').attr('src','asserts/images/expand.gif'); } }) }); </script>cualquiera puede ayudar
Quiero animar el logotipo de las imágenes gif. Proporciono el sitio web modelo que utilizó la animación.
1 answers
Answer question0
Establecer el src= de una imagen siempre reiniciará la imagen si está animada, incluso si es el mismo src= . Su problema es que restablece el src= (al mismo valor) en cada desplazamiento para que se reinicie constantemente.
Puede almacenar si ya ha configurado la imagen o no: bastaría con una bandera simple (o .data en el img).
$(function() { $(window).scroll(function() { // set to true/false here based on your initial image var invert = false; if ($(this).scrollTop() > 10) { if (!invert) { $('.navbar-brand-img img').attr('src', 'asserts/images/innvert.gif'); invert = true; } } if ($(this).scrollTop() < 49) { if (invert) { $('.navbar-brand-img img').attr('src', 'asserts/images/expand.gif'); invert = false; } } }) }); Tenga en cuenta que su >10 no coincide con <49 , por lo que puede causar problemas.