交换图片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);
        });
    });
});