Javascript jQuery需要更平滑的交叉淡入淡出效果

我有（并且需要）一个点击循环浏览图像，并为此目的使用这段代码：

$(".wrapper").on("click", function() {

    var $content = $(this).find(".content_stack");

    if ($content.length > 1) {

        var $curr = $content.filter(":visible");
        var $next = $curr.is($content.last()) ? $content.first() : $curr.next();

        $curr.fadeOut(1000, function() {
            $next.fadeIn(1000)
        })
    }
});

^

我还发现了SO（和“改编”）上的一个自动“twin”：

^

更新：两者都按预期分别工作。我需要这两个（点击版本和自动版本的循环图像）。代码是如此不同，因为我无法调整它们中的任何一个，使之适用于这两种情况：|

问题：完全淡出>>淡入看起来太分散注意力/“闪烁”/“突然”

如果有人能帮助我使交叉淡入淡出变得更平滑/更微妙/…就像一幅图像正在变成另一幅……（如果可能，无需在CSS中添加绝对/相对位置）。

使用一个函数来循环和处理点击事件。
我将动画拆分为具有函数队列的函数。如果FadeIn被

.onclick

调用，则队列将被

.stop（true）

方法清除，以停止动画并删除队列

$(".wrapper").each(function() {
    var $this = $(this),
        $curr = null,
        $crossfade = $this.find(".crossfade_square");
    var zindex = -1,
        length = $crossfade.length;

    function fadeOut() {
        if($curr)
        $curr.stop(true, false)
            .fadeOut(1000, fadeIn);
        else
            fadeIn();
    }

    function fadeIn() {
       ++zindex;
       $curr = $crossfade.eq(zindex % length)
           .fadeIn(1000)
           .delay(5000)
           .queue(fadeOut);
  }

  $this.on("click", fadeOut);

  fadeIn();

});

---

我已经更新了样本。

你好！：）谢谢你的建议，但我需要两个分开。我现在就更新我的答案。这个问题是淡出/淡入看起来太“突然”，不像真正的交叉淡入…效果很好，更重要的是，它增加了自动循环的点击控制！！！我可以请你（如果可能的话）调整它的淡入淡出效果，这样图像就不会完全淡入淡出（我真的很喜欢那里CSS动画的平滑度，但不能使用绝对/相对位置）。。。如果可能的话。。。。这将是一个答案+++。fadeToggle可以让它看起来更像我上面评论中小提琴中的CSS动画吗？…或者它不会有任何区别？

$(".wrapper").each(function() {
    var $this = $(this),
        $curr = null,
        $crossfade = $this.find(".crossfade_square");
    var zindex = -1,
        length = $crossfade.length;

    function fadeOut() {
        if($curr)
        $curr.stop(true, false)
            .fadeOut(1000, fadeIn);
        else
            fadeIn();
    }

    function fadeIn() {
       ++zindex;
       $curr = $crossfade.eq(zindex % length)
           .fadeIn(1000)
           .delay(5000)
           .queue(fadeOut);
  }

  $this.on("click", fadeOut);

  fadeIn();

});