Can'；t使用jquery和jqueryui使重叠的div淡入淡出过渡

我有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”设置为显示：无；图标区域的数据幻灯片属性等于正确的幻灯片编号。在尝试让该转换进行淡入淡出转换失败后，我尝试使用“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上做了模拟：

以下是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>

---

谢谢你的帮助。谢谢

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

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

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

.slidecontainer.hiddenslide {
}

并更改这些（请注意，幻灯片1未更改）：

---

谢谢你的回复。我试过你的剧本。内容淡出，但新内容根本没有出现。这是我的东西，以防我把东西放错了$（'.iconcontainer.icon'）。在（{mouseenter:function（）{$（'.outercontainer.slidecontainer'）。淡出（“慢”，function（）{var show_slide=$（this）.attr（'data-slide'）；$（'.+show_slide）.delay（600.fadeIn（“慢”）}）`我也尝试了这个方法，效果很好，但不是很顺利。{code>$（'.iconcontainer.icon'）。在（{mouseenter:function（）{$（'.outercontainer.slidecontainer'））.fadeOut（300）；var show_slide=$（this.attr（'data-slide'）；$（'.+show_slide）.stop（true.delay（300）；}）这是因为“this”有一个新值。将show_slide=线移到淡出线上方。我做了一些改变。好。。。很多变化。

.slidecontainer.hiddenslide {
}

.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;
}