Javascript 使用jquery进行交叉淡入淡出循环

我试图用jquery交叉淡入淡入淡出的图像，但我认为存在问题，因为mainportfo_title类

第一个图像淡出，然后我看到第二个图像，但标题图像1在顶部，如果我删除mainportfo_title div脚本工作，但不是100%完美，我无法看到第二个图像平滑淡入

<div class="porto_container"> 

<div id="fade-group">
    <div class="hover"> <a href="#">
            <img width="250" height="250" alt="image1" class="active" src="http://dummyimage.com/400x260/000/fff.png&text=Image+01"  opacity: 1;">
            <div class="mainportfo_title">image 1</div>
        </a> 
    </div>
    <div class="hover"> <a href="#">
            <img width="250" height="250" alt="image2" class="attachment-post-thumbnail" src="http://dummyimage.com/400x260/000/fff.png&text=Image+02"  opacity: 1;">
            <div class="mainportfo_title">image 2</div>
        </a> 
    </div>
</div>
</div>

---

有几件事不对劲

首先，您的HTML代码的格式不太正确

opacity:1；“>

在两个图像

div

s上。它甚至不需要，所以我已将其删除。然后，您在整个过程中只对一个图像进行淡入淡出，我假设您将它们放置在彼此的顶部，这意味着文本/链接始终可见并位于彼此的顶部。在演示中，我绝对定位了

。悬停

元素重叠。然后我将

active

类移动到第一个

。悬停
作为
下一个（）
你打的电话是针对第一个
的
.mainportfou title
div。hover
.ll完成后，我将
激活
淡出和
下一个
淡出
。如果一个隐藏而另一个显示，则不需要所有z-index内容。如果你想要更多的
幻灯片
这也是可能的，因为它们都是
display:none

HTML:

JS:

演示：
您有一些未关闭的标记和无效的标记（
不透明度：1；
部分应该在
样式
属性中）。而且
show
方法会立即显示元素。


setInterval(function () {
        var $active = $('#fade-group .active');
            // Select element following the element with the class .active within #fade-group
        var $next = ($active.next().length > 0) ? $active.next() : $("#fade-group img:first");
            // Move the next img element to next to top of stack
        $next.css('z-index', 2);
            // Fadeout the active img element
            $active.fadeOut(1500, function(){
                // Fade out complete
            console.log("$active.fadeOut(1500, function(){");
                // Active img element
            $active.removeClass("active")       // Remove active class
                .css("z-index", "")             // Remove css z-index property
                .show();                        // Show. Prep for next time to see it.
                // Next img element 
            $next.addClass("active")            // Add active class
                .css("z-index", 3); 
            }); 


        }, 3000);

<div class="porto_container">
    <div id="fade-group">
        <div class="hover active"> <a href="#">
            <img width="250" height="250" alt="image1" src="http://dummyimage.com/400x260/000/fff.png&text=Image+01"/>
            <div class="mainportfo_title">image 1</div>
        </a> 
        </div>
        <div class="hover"> <a href="#">
            <img width="250" height="250" alt="image2" class="attachment-post-thumbnail" src="http://dummyimage.com/400x260/000/fff.png&text=Image+02"/>
            <div class="mainportfo_title">image 2</div>
        </a> 
        </div>
    </div>
</div>

.hover {
    position:absolute;
    top:0;
    left:0;
}
.hover {
    display:none;
}
.hover:nth-child(1) {
    display:block;
}

setInterval(function () {
    var $active = $('#fade-group .active');
    // Select element following the element with the class .active within #fade-group
    var $next = ($active.next().length > 0) ? $active.next() : $("#fade-group .hover:first");
    // Fadeout the active img element
    $active.fadeOut(1500, function () {
        // Active img element
        $active.removeClass("active"); // Remove active class
        // Next img element 
        $next.addClass("active"); // Add active class
    });
    $next.fadeIn(1500);
}, 3000);