Modifier l'opacité de 2 éléments pour donner un effet de fondu enchaîné

Question

Je travaille sur certaines fonctionnalités pour un e-commerce où un utilisateur clique sur une couleur de produit, et l'image précédente des produits disparaît alors que le nouveau produit s'estompe, je suis en essayant d'obtenir un effet de fondu enchaîné, mais j'ai un effet de flicker là-dedans que je ne veux pas, je pense que ça vient quand je retire la vieille image du dom, voici un violon pour vous montrer ce que j'essaye de faire.

http://jsfiddle.net/L9Z5G/

Answer 1

J'espère que c'est ce que vous recherchez: Demo

$('.colours').click(function() { 
    if ($('#' + $(this).html().toLowerCase()).attr('class') == 'active') { return; } 

    var active = $('.active'); 
    var next = $('#' + $(this).html().toLowerCase()); 

    active.fadeOut(500, function() { 
    $(this).toggleClass('active'); 
    }); 
    next.fadeIn(500, function() { 
    $(this).toggleClass('active'); 
    }); 
});​ 

Answer 2

est-il pas plus facile à utiliser .hide() et .Show(), et juste les laisser se Crossfade?

Answer 3

Pour lier un événement click, vous utilisez click() heres comment.

$('#color1').click(function(){ 
     $('#image1').fadeOut('fast'); 
}); 

Answer 4

Essayez cette s'il vous plaît: travail démohttp://jsfiddle.net/djMZe/1/ouhttp://jsfiddle.net/R7u8G/1/

espère que cela répond aux besoins! :)

Code

$("#colours li").click(function() { 
    $(".large-image:first-child:not(.new)").animate({ 
     opacity: 0 
    }, 500); 
    var img = $("<img />").attr('src', $(this).data("alternative")).attr("class", "large-image new"); 
    img.css({ 
     opacity: 0 
    }) 
    $(".zoom-image").append(img); 
    //img.animate({ opacity : 1}, 500); 
    img.css({ 
     "opacity": "1" 
    }).fadeIn("slow"); 
    $(".large-image:not(:last-child)").remove(); 

});​ 

Answer 5

Voir Cette DEMO, espérons que vous avez tenu cet effet.

ÉDITÉ:UPDATED FIDDLE

jQuery Cycle Plugin

$('#slideshow').before('<ul id="nav">').cycle({ 
    fx: 'fade', 
    speed: 'fast', 
    timeout: 0, 
    pager: '#nav', 

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
     return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
});​ 

SEE REFERENCE