更改2个元素的不透明度以实现交叉淡入淡出效果

我正在开发电子商务的某些功能，其中用户单击产品颜色，并且在新产品消失时产品的上一张图像淡出，我试图达到交叉淡入淡出的效果，但是我在那里我不想要闪烁效果，我认为它是在我从dom中删除旧图像时出现的，这里是一个小提示，告诉你我想要做什么。更改2个元素的不透明度以实现交叉淡入淡出效果

http://jsfiddle.net/L9Z5G/

来源

2012-07-26 Udders

请参阅下面给出的答案。 – 2012-07-26 11:18:34

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

来源

2012-07-26 11:33:19 dstrachan

这难道不是更容易使用.hide（）和.show（），只是让他们自己交叉淡入淡出？

来源

2012-07-26 10:57:49 davebowker

要绑定单击事件，可以使用click（）继承。

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

来源

2012-07-26 11:00:06

+1给你！ – 2012-07-26 11:47:49

试试这个请：工作演示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(); 

});

来源

2012-07-26 11:00:39

谢谢，但你的解决方案只是交换图像，我想交换有一个很好的淡入淡出效果。 – Udders 2012-07-26 11:13:28

@ sico87：看到我的回答，希望这将是一个解决方案。 – 2012-07-26 11:19:01

@ sico87像这样：http://jsfiddle.net/R7u8G/1/'：）'？ – 2012-07-26 11:46:11

见这DEMO，希望你需要这样的效果。

编辑：UPDATED FIDDLE

的jQuery Cycle插件

$('#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

来源

2012-07-26 11:14:15

谢谢，但用户不点击缩略图，他们点击色板，我如何将它链接到我现有的系统？ – Udders 2012-07-26 11:22:22

这个怎么样：http://jsfiddle.net/akhurshid/ZKgnR/10/ – 2012-07-26 12:08:58

更改2个元素的不透明度以实现交叉淡入淡出效果

回答

相关问题