javascript - 更改 2 个元素的不透明度以提供交叉淡入淡出效果

Question

我正在为电子商务开发一些功能，其中用户单击产品颜色，并且产品的先前图像在新产品消失时淡出，我正在尝试实现交叉淡入淡出效果，但是我有闪烁效果在那里我不想要，我认为当我从 dom 中删除旧图像时，这是一个向你展示我想要做什么的小提琴。

http://jsfiddle.net/L9Z5G/

Answer 1

使用 .hide() 和 .show() 并让它们自己淡入淡出不是更容易吗？

Answer 2

要绑定单击事件，请使用 click() 方法。

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

Answer 3

请试试这个：工作演示 http://jsfiddle.net/djMZe/1/ 或 http://jsfiddle.net/R7u8G/1/

希望能满足需求！:)

代码

$("#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 4

看这个DEMO，希望你需要这个效果。

编辑： 更新的小提琴

jQuery 循环插件

$('#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>';
    }
});​

见参考

Answer 5

我希望这就是你要找的：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');
  });
});​