Question

我正在研究电子商务的一些功能，用户点击产品颜色，产品的上一张图像在新产品消失时淡出，我试图实现交叉淡入淡出效果，但是我在我不想要的地方有闪烁效果，我认为当我从dom中移除旧图像时，这是一个小提示，告诉你我想做什么。

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，希望您已经需要此效果。

已编辑： UPDATED FIDDLE

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>';
    }
});

SEE REFERENCE

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');
  });
});

更改2个元素的不透明度以产生交叉渐变效果

5 个答案: