交換圖片Src jQuery不起作用？

Question

...但是由於某種原因，它將無法正常工作。 初學者在這里，所以如果有人可以解釋我做錯了什么，我將非常感激。 xD

http://codepen.io/DylanEspey/pen/xgwJr一個示例Codepen我很快就拼湊起來，試圖說明我的問題。

我討厭不得不問很多問題，但這是我的第一個項目，我有自己的回旋余地，而且我一直在努力在截止日期之前完成工作，以便給人們留下深刻的印象。 xD那和大學使我的日程變得一團糟，所以我一直犯着非常愚蠢的錯誤。 這樣，幾周前我才開始學習Javascript ...

Answer 1

嘗試這個：

$('.thumbnails img').click(function () {
    var thmb = this;
    var src = this.src;
    $('.project-img img').fadeOut(400, function () {
        thmb.src = this.src;
        $(this).attr('src', src).fadeIn(400);
    });
});

小提琴演示

Answer 2

問題在於，用於淡入淡出效果的疊加層會阻止您單擊其下方的圖像。 解決方案是，不要在圖像上聽一聽，而在覆蓋圖上聽它，然后相應地調整參考。

我已將您的Codepen分叉以反映此情況： http ://codepen.io/anon/pen/qlkob

JS：

$(document).ready(function() {
    $('.thumbnails .overlay').click(function() {
        var img = $(this).find('img')[0];
        var thmb = img;
        var src = img.src;
        $('.project-img img').fadeOut(400,function(){
            thmb.src = this.src;
            $(this).attr('src', src).fadeIn(400);
        });
    });
});