更改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個元素的不透明度以實現交叉淡入淡出效果

回答

相關問題