Último parpadeo de div durante la animación de desplazamiento de jQuery

Aquí está mi código: http://jsfiddle.net/ZspZT/

Como puede ver en el ejemplo, el cuarto bloque div parpadea bastante mal, particularmente en el efecto de desplazamiento, pero también ocasionalmente con los otros divs.

Gracias de antemano!

preguntado el 01 de febrero de 12 a las 14:02

Publique el código correspondiente aquí también. -

¿Puedes publicar algo de tu código aquí también? La red externa bloquea las URL que contienen "ZspZT" -

@musefan Curiosamente específico. -

stop () es crucial cuando varios eventos usan animación. -

La solución simple sería agregar background-color: #999999; a #four-ways-slider. Los efectos todavía tienen micrófonos, pero no parpadean. -

2 Respuestas

Parece que la función de suavizado incorporada en .animate está haciendo que los anchos porcentuales sumen más del 100%, lo que hace que desaparezca el último sub-DIV. Hay algunas formas de solucionar este problema.

Cuando reemplazo sus anchos porcentuales con anchos numéricos fijos, el problema desaparece. Usé esto en el código a continuación (y su código tenía MUCHA redundancia para reducir):

$('document').ready(function() {
    var speed = 450;
    $('.four-ways-slide').hover(function() {
        $(this).stop().animate({
            width: 425
        }, speed).siblings().stop().animate({
            width: 25
        }, speed);
    }, function() {
        $(this).siblings().andSelf().stop().animate({
            width: 125
        }, speed);
    });
});

http://jsfiddle.net/mblase75/ZspZT/10/

Otra posibilidad es utilizar anchos porcentuales que sumen 99% en lugar de 100% y establecer un color de fondo en el contenedor DIV para ocultar el espacio. Agregar suavizado lineal al método .animate ayuda a evitar que el ancho total exceda el 100%:

$('document').ready(function() {
    var speed = 450;
    $('.four-ways-slide').hover(function() {
        $(this).stop().animate({
            width: '75%'
        }, speed, 'linear').siblings().stop().animate({
            width: '8%'
        }, speed, 'linear');
    }, function() {
        $(this).siblings().andSelf().stop().animate({
            width: '24.5%'
        }, speed, 'linear');
    });
});

#four-ways-slide-4,#four-ways-slider{background:#999999;}

http://jsfiddle.net/mblase75/ZspZT/9/

Respondido 01 Feb 12, 18:02

intente usar 'mouseenter' y 'mouseleave' en lugar de 'hover'. también debe asignar variables en lugar de repetir divs

    var one = $('#four-ways-slide-1');
var two = $('#four-ways-slide-2');
var three = $('#four-ways-slide-3');
var four = $('#four-ways-slide-4');
var all = $('.four-ways-slide');

thisIn = function(){
    all.animate({width:'8%'},{duration: 450,queue:false});
};

thisOut = function(){
    all.animate({width:'25%'},{duration: 450,queue:false});       
};

one.mouseenter(function(){
    thisIn();
    $(this).animate({width:'76%'},{duration: 450,queue:false});

        one.mouseleave(function(){
            thisOut();
            $(this).animate({width:'25%'},{duration: 450,queue:false});
        });

});

Respondido 01 Feb 12, 19:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.