jquery - 无法使用 jquery 和 jqueryui 让重叠的 div 淡化过渡

Question

我有 5 个类似内容的 div。我只想一次显示一个。内容下方有5个图标。当用户将鼠标悬停在图标上时，会显示相应的 div。这一切都完美无缺。但是，当用户从一个图标更改为下一个图标时，我希望有一个淡入淡出的过渡。我从以下脚本开始：

jQuery(document).ready(function($){
  $('.iconcontainer .icon').on(
  {
    mouseenter: function()
    {
        $('.outercontainer .slidecontainer').addClass('hiddenslide');
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).removeClass('hiddenslide');
    }
  });
});

CSS 类 'hiddenslide' 设置为 display:none; 并且图标区域的 data-slide 属性等于正确的幻灯片编号。在尝试让该转换进行淡入淡出转换失败后，我尝试使用“show”、“hide”、“fadeIn”、“fadeOut”，有无延迟。我已经阅读了几十个线程，我得到了很多奇怪的结果，但从来没有一个平滑的渐变过渡。我确信我的错误对许多人来说是显而易见的，但我似乎无法理解。

我用隐藏和显示尝试了这个脚本

  $('.iconcontainer .icon').on(
  {
    mouseenter: function()
    {
        $('.outercontainer .slidecontainer').hide("slow");
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).show("slow");
    }
  });
});

和淡入淡出

jQuery(document).ready(function($){
  $('.iconcontainer .icon').on(
  {
    mouseenter: function()
    {
        $('.outercontainer .slidecontainer').fadeOut("slow");
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).delay(600).fadeIn("slow");
    }
  });
});

我在codepen上模拟了它：http: //codepen.io/redbranchmedia/pen/dkiCB

这是html：

<div class="outercontainer">
    <div class="slidecontainer slide1">
        <div class="innercontainer">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/pointer_green.png" class="colorarrow" id="arrowgreen"><img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
            <div class="prodpara"><h2>Talemetry</h2><p>is a cloud software solution that provides recruiters with all the tools they need to find, attract &amp; engage top talent. Talemetry works with your Applicant Tracking System and recruiting service providers to deliver a complete talent acquisition solution to support today’s recruiting challenges.</p>
            </div>
            <div class="ctabutton clearfix"> 
                <p class="ctatext">Put the Power of Talent Generation to Work At Your Work.</p>
                <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
                <h3 class="ctaaction">Let's Talk >></h3>
            </div>
        </div>
    </div>
    <div class="slidecontainer slide2 hiddenslide">
        <div class="innercontainer">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/pointer_blue.png" class="colorarrow" id="arrowblue"><img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
            <div class="prodpara"><h2>Source &amp; CRM</h2><p>Search across all sources of hire, find and rank candidates for immediate job openings, all while building talent networks for the future.</p>
            </div>
            <div class="ctabutton clearfix"> 
                <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
                <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
                <h3 class="ctaaction">Request a Demo >></h3>
            </div>
        </div>
    </div>
    <div class="slidecontainer slide3 hiddenslide">
        <div class="innercontainer">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/pointer_red.png" class="colorarrow" id="arrowred"><img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
            <div class="prodpara"><h2>Job Broadcast</h2><p>Post, manage, and compare the effectiveness of job postings across hundreds of job boards and social media sites all from one system.</p>
            </div>
            <div class="ctabutton clearfix"> 
                <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
                <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
                <h3 class="ctaaction">Request a Demo >></h3>
            </div>
        </div>
    </div>
    <div class="slidecontainer slide4 hiddenslide">
        <div class="innercontainer">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/pointer_orange.png" class="colorarrow" id="arroworange"><img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
            <div class="prodpara"><h2>Career Sites</h2><p>Promote jobs and strengthen your employer brand by building career sites using a simple Content Management System.</p>
            </div>
            <div class="ctabutton clearfix"> 
                <p class="ctatext">Deliver your employer brand every- where with Talemetry Career Sites.</p>
                <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
                <h3 class="ctaaction">Request a Demo >></h3>
            </div>
        </div>
    </div>
    <div class="slidecontainer slide5 hiddenslide">
        <div class="innercontainer">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/pointer_purple.png" class="colorarrow" id="arrowpurple"><img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
            <div class="prodpara"><h2>Apply</h2><p>Capture more of the best applicants by creating a simple, integrated, and social and mobile-ready application process.</p>
            </div>
            <div class="ctabutton clearfix"> 
                <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
                <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
                <h3 class="ctaaction">Request a Demo >></h3>
            </div>
        </div>
    </div>

    <div class="iconcontainer">
        <div class="icon icon1" data-slide="slide1">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/talemetry_icon2.png">
            <p>Talemetry</p>
        </div>
        <div class="icon icon2" data-slide="slide2">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/source_and_crm.png">
            <p>Source &amp; CRM</p>
        </div>
        <div class="icon icon3" data-slide="slide3">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/job_broadcast.png">
            <p>Job Broadcast</p>
        </div>
        <div class="icon icon4" data-slide="slide4">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/career_sites.png">
            <p>Career Sites</p>
        </div>
        <div class="icon icon5" data-slide="slide5">
            <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/apply.png">
            <p>Apply</p>
        </div>

    </div>
</div>

和 CSS：

.outercontainer {
    width:100%;
}

.outercontainer * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.outercontainer p {
    font-family:'Ubuntu';
    margin-bottom:0;
}

.slidecontainer {
    width:100%;
    height:285px;
    transition:all 0.2s ease-in-out;
}

.slidecontainer.hiddenslide {
    display:none;
}

.slidecontainer.slide1 {
background-color:#b7be10;
}

.slidecontainer.slide2 {
background-color:#374bb5;
}

.slidecontainer.slide3 {
background-color:#ef123e;
}

.slidecontainer.slide4 {
background-color:#efae00;
}

.slidecontainer.slide5 {
background-color:#9d5bb6;
}

.slidecontainer .innercontainer {
    max-width:940px;
margin:0 auto;
height:285px;
position:relative;
}

img.colorarrow {
    position:absolute;
    bottom:-15px;
    z-index:0;
}

img.colorarrow#arrowgreen {
    left:75px;
}

img.colorarrow#arrowblue {
    left:198px;
}

img.colorarrow#arrowred {
left:318px; 
}

img.colorarrow#arroworange {
    left:437px;
}

img.colorarrow#arrowpurple {
    left:559px;
}

img.productimg {
    float:right;
    margin-top:15px;
z-index:500;
position:relative;
}

.prodpara {
    padding-top:20px;
    width:470px;
    position:relative;
    z-index:999;
}

.prodpara > h2 {
    font-size:30px !important;
    color:#fff !important;
    display:inline;
    margin-right:5px !important;
}

.prodpara > p {
    font-size:18px;
    color:#fff;
    display:inline;
    line-height:28px;

}

.ctabutton {
    background-color: #F37F00;
width: 450px;
border-radius: 10px;
box-shadow: 0 3px 10px 0px #5F5F5F;
position:absolute;
bottom:20px;
left:0;
}

.ctabutton p.ctatext {
    font-size:15px;
    color:#fff !important;
    float:left;
    width: 252px;
margin: 5px 0 5px 10px;
}

p.ctaline {
    float:left;
}

img.ctaline {
    float:left;
    margin-top:5px;
}

h3.ctaaction {
    font-size:20px !important;
    color:#fff !important;
/*  float:right;
    margin:10px 22px 0 0; */
text-align: center;
line-height: 16px !important;
}

.iconcontainer {
    max-width:940px;
    width:100%;
    margin:20px auto 0;
}

.iconcontainer .icon {
    float:left;
    width:90px;
    text-align: center;
}

.iconcontainer .icon.icon1 {
    margin-left:150px;
}

.iconcontainer .icon {
    margin-right:30px;
}

.iconcontainer .icon p {
    color:#585858;
    font-size: 14px;
}

我很感激任何帮助。谢谢！

Answer 1

试试这个等待它在延迟之前淡出并淡入。我不喜欢延迟，但你可以：

var show_slide = $(this).attr('data-slide');
$('.outercontainer .slidecontainer:visible').fadeOut("slow", function() {
    $('.' + show_slide).delay(600).fadeIn("slow");
}

要使其工作，您必须删除整个 css 或只取出隐藏线：

.slidecontainer.hiddenslide {
}

并更改这些（注意 slide1 没有更改）：

.slidecontainer.slide2 {
    background-color:#374bb5;
    display:none;
}

.slidecontainer.slide3 {
    background-color:#ef123e;
    display:none;
}

.slidecontainer.slide4 {
    background-color:#efae00;
    display:none;
}

.slidecontainer.slide5 {
    background-color:#9d5bb6;
    display:none;
}