jquery - On Button Click, a DIV Fades Out, While Another DIV Fades in at the Same Location -
i have functioning image slider floated next unordered list of (3) divs. first color of slider corresponds first div. i'm trying create effect whereby when clicks 'next' button on slider, not slider transition next color, div floated next fade out, while next div, corresponds next color fades in.
i have slider working, i'm having difficulty figuring out how allow each click of button continuously loop through each div corresponds colors of slider.
i'm relative beginner jquery, can understand of more complex logic, can't figure out. tried making overflow of div's hidden, , follow same process of image slider, no luck.
i'd appreciate help. jsfiddle of have far below.
<ul id="slide_info"> <div id="info1"> <h2>blue header</h2> <p>description</p> </div> <div id="info2"> <h2>red header</h2> <p>description</p> </div> <div id="info3"> <h2>yellow header</h2> <p>description</p> </div> </ul>
here is. can tweak height , widths of divs according requirement.
jquery(document).ready(function ($) { var slidecount = $('#slider ul li').length; var slidewidth = $('#slider ul li').width(); var slideheight = $('#slider ul li').height(); var sliderulwidth = slidecount * slidewidth; $('#slider').css({ width: slidewidth, height: slideheight }); $('#slider ul').css({ width: sliderulwidth, marginleft: - slidewidth }); $('#slider ul li:last-child').prependto('#slider ul'); var slideinfowidth = $('.desc').width(); var slideinfoheight = $('.desc').height(); var sliderulinfowidth = slidecount * slidewidth; $('#slide_info').css({ width: slideinfowidth, height: slideinfoheight }); $('#info').css({ width: sliderulinfowidth}); function moveright() { $('#slider ul').animate({ left: - slidewidth }, 300, function () { $('#slider ul li:first-child').appendto('#slider ul'); $('#slider ul').css('left', ''); }); $('#info').animate({ left: - slideinfowidth }, 300, function () { $('.desc:first-child').appendto('#info'); $('#info').css('left', ''); }); }; $('a.control_next').click(function () { moveright(); }); }); html, body { margin: 0; padding: 0; } #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; float:right; width: 50% !important; } #slider ul { position: relative; margin: 0; padding: 0; height: 550px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 639.5px; height: 550px; text-align: center; line-height: 300px; } a.control_next { position: absolute; top: 45%; z-index: 999; display: block; padding: 50px 50px; width: auto; height: auto; background-color: #fff; color: #000; text-decoration: none; opacity: 0.5; background-image:url(prev-icon.png); background-repeat:no-repeat; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: 0.2s ease; } a.control_next { right: 0; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px;} #feat { width: 100%;} .feat_slides { background-position: center top; background-size: cover; background-repeat: no-repeat;} #feat_slide1 { background: #006699;} #feat_slide2 { background: #cc0033;} #feat_slide3 { background:#ffff99;} #slide_info { float: left; width:50%; padding-left: 0;} .slide_info { } #info1, #info2, #info3 { background-color: #fff; width: 50%; height: 500px; padding-top: 215px; padding-left: 30px;} .desc{ float:left; } #slide_info{ overflow:hidden; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="feat"> <ul id="slide_info"><div id="info"> <div class="desc" id="info1"> <h2>blue header</h2> <p>description</p> </div> <div class="desc" id="info2"> <h2>red header</h2> <p>description</p> </div> <div class="desc" id="info3"> <h2>yellow header</h2> <p>description</p> </div> </div> </ul> <div id="slider"> <a href="#" class="control_next" id="toggle_info">button</a> <ul> <li class="feat_slides" id="feat_slide1"></li> <li class="feat_slides" id="feat_slide2"></li> <li class="feat_slides" id="feat_slide3"></li> </ul> </div> </div>
Comments
Post a Comment