javascript - jquery交叉淡入淡出循环

Question

我正在尝试使用 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>

jquery 脚本:

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);

Answer 1

有些地方不对，

首先，您的 HTML 代码在两个图像 div 上的格式都不太正确 opacity: 1;">。它甚至不需要，所以我将其删除。然后您一直只是淡入和淡出一张图像，我假设您将它们放在彼此之上，这意味着文本/链接始终可见并且彼此重叠。在演示中，我绝对定位了 .hover 元素重叠。然后我将 active 类移动到第一个 .hover 作为 next() 调用您正在制作的目标是第一个 .hover 的 .mainportfo_title div。完成后，我制作了 active fadeOut 和 next fadeIn。如果一个隐藏而另一个显示，则不需要所有 z-index 的东西。如果你想要更多的 slides 那么这也是可能的因为它们都是 display:none 开头。

HTML:

<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>

CSS:

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

JS:

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);

演示:http://jsfiddle.net/robschmuecker/8nj3fk84/