Can't get overlapping divs to fade transition with jquery and jqueryui -
i have 5 divs of similar content. want 1 displayed @ time. there 5 icons below content. when user hovers on icon, appropriate div displays. working perfectly. however, have have fade transition when user changes 1 icon next. started following script:
jquery(document).ready(function($){ $('.iconcontainer .icon').on( { mouseenter: function() { $('.outercontainer .slidecontainer').addclass('hiddenslide'); var show_slide = $(this).attr('data-slide'); $('.' + show_slide).removeclass('hiddenslide'); } }); }); the css class 'hiddenslide' set display:none; , icons areas have data-slide attribute equal correct slide number. after unsuccessfully trying transition fade transition, tried using 'show', 'hide', 'fadein', 'fadeout' , without delays. i've read dozens of threads , got lot of weird results, never smooth fading transition. i'm sure error apparent many, can't seem it.
i tried script hide , show
$('.iconcontainer .icon').on( { mouseenter: function() { $('.outercontainer .slidecontainer').hide("slow"); var show_slide = $(this).attr('data-slide'); $('.' + show_slide).show("slow"); } }); }); and fadein, fadeout
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"); } }); }); i have mocked on codepen: http://codepen.io/redbranchmedia/pen/dkicb
here 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 cloud software solution provides recruiters tools need find, attract & engage top talent. talemetry works applicant tracking system and recruiting service providers to deliver complete talent acquisition solution support today’s recruiting challenges.</p> </div> <div class="ctabutton clearfix"> <p class="ctatext">put power of talent generation work @ 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 & crm</h2><p>search across sources of hire, find , rank candidates immediate job openings, while building talent networks future.</p> </div> <div class="ctabutton clearfix"> <p class="ctatext">significantly reduce sourcing time , improve recruiter efficiency.</p> <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png"> <h3 class="ctaaction">request 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, , compare effectiveness of job postings across hundreds of job boards , social media sites 1 system.</p> </div> <div class="ctabutton clearfix"> <p class="ctatext">significantly reduce sourcing time , improve recruiter efficiency.</p> <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png"> <h3 class="ctaaction">request 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 , strengthen employer brand building career sites using simple content management system.</p> </div> <div class="ctabutton clearfix"> <p class="ctatext">deliver employer brand every- talemetry career sites.</p> <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png"> <h3 class="ctaaction">request 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 best applicants creating simple, integrated, , social , mobile-ready application process.</p> </div> <div class="ctabutton clearfix"> <p class="ctatext">significantly reduce sourcing time , improve recruiter efficiency.</p> <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png"> <h3 class="ctaaction">request 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 & 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> and 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; } i appreciate help. thanks!
try waits fades out before delay , fade in. don't delay may:
var show_slide = $(this).attr('data-slide'); $('.outercontainer .slidecontainer:visible').fadeout("slow", function() { $('.' + show_slide).delay(600).fadein("slow"); } to make work have remove whole css or take out hide line:
.slidecontainer.hiddenslide { } and change these (notice slide1 isn't changed):
.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; }
Comments
Post a Comment