Lorsque vous cliquez sur un bouton, un DIV disparaît, alors qu'un autre DIV se fond au même endroit

Question

J'ai un curseur d'image entièrement fonctionnel flottant à côté d'une liste non triée de (3) DIVS. La première couleur du curseur correspond à la première DIV. J'essaye de créer un effet où quand quelqu'un clique sur le bouton 'suivant' du curseur, non seulement le curseur passera à la couleur suivante, mais le DIV flottant à côté de lui disparaîtra, tandis que le DIV suivant, qui correspond Je vois le curseur fonctionner, mais j'ai du mal à comprendre comment permettre à chaque clic du bouton de boucler continuellement chaque DIV correspondant aux couleurs du curseur. Je suis un débutant relatif à jquery, mais je peux comprendre une partie de sa logique plus complexe, je ne peux pas comprendre. J'ai essayé de faire le débordement de la DIV cachée, et de suivre le même processus de curseur d'image, mais sans chance.

J'apprécierais vraiment toute aide. Un Jsfiddle de ce que j'ai jusqu'ici est ci-dessous.

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

https://jsfiddle.net/lgwj/Lb6p87ft/1/

Answer 1

Ici, il est. Vous pouvez ajuster la hauteur et la largeur des divs en fonction de vos besoins.

jQuery(document).ready(function ($) { 
 
    
 
\t var slideCount = $('#slider ul li').length; 
 
\t var slideWidth = $('#slider ul li').width(); 
 
\t var slideHeight = $('#slider ul li').height(); 
 
\t var sliderUlWidth = slideCount * slideWidth; 
 
\t 
 
\t $('#slider').css({ width: slideWidth, height: slideHeight }); 
 
\t $('#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', ''); 
 
     }); 
 
    }; 
 
\t 
 
    $('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: all 0.2s ease; 
 
} 
 

 

 
a.control_next { 
 
    right: 0; 
 
} 
 

 
.slider_option { 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 160px; 
 
    font-size: 18px;} 
 
    
 
    
 
    
 
#feat { 
 
    \t width: 100%;} 
 
    
 
    
 
.feat_slides { 
 
\t background-position: center top; 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat;} 
 
\t 
 
#feat_slide1 { 
 
\t background: #006699;} 
 
\t 
 
#feat_slide2 { 
 
\t background: #CC0033;} 
 
\t 
 
#feat_slide3 { 
 
\t background:#FFFF99;} 
 
\t 
 
\t 
 
#slide_info { 
 
\t float: left; 
 
\t width:50%; 
 
\t padding-left: 0;} 
 
\t 
 
.slide_info { 
 
\t } 
 
\t 
 
#info1, #info2, #info3 { 
 
\t background-color: #fff; 
 
\t width: 50%; 
 
\t height: 500px; 
 
\t padding-top: 215px; 
 
\t 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"> 
 
\t <ul id="slide_info"><div id="info"> 
 
    \t <div class="desc" id="info1"> 
 
\t \t \t <h2>Blue Header</h2> 
 
\t \t \t <p>Description</p> 
 
     </div> 
 
     
 
     <div class="desc" id="info2"> 
 
\t \t \t <h2>Red Header</h2> 
 
\t \t \t <p>Description</p> 
 
     </div> \t 
 
     
 
     <div class="desc" id="info3"> 
 
\t \t \t <h2>Yellow Header</h2> 
 
\t \t \t <p>Description</p> 
 
     </div> \t 
 
     </div> 
 
\t </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>

Answer 2

La première chose évidente que j'ai vu était un div comme un enfant immédiat d'un ul.
Même si cela ne pose aucun problème, c'est certainement un code HTML invalide. La plupart des navigateurs modernes fixent cela ... Mais encore c'est une mauvaise chose à faire.

Les éléments div à l'intérieur de <ul id="slide_info"> doivent donc être entourés de <li> et de </li>. Puis, à propos de votre code, vous avez utilisé un truc ingénieux appendTo pour "faire défiler" les éléments de la liste ... Pourquoi ne pas utiliser la même astuce? Maintenant, à propos du fondu enchaîné ... Il y a des délais d'animation à prendre en compte. Vous pouvez utiliser des rappels, qui sont des fonctions exécutées à la fin d'une autre.

$(document).ready(function(){ 

    // Variable declarations 
    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    // Positionning 
    $('#slider').css({ width: slideWidth, height: slideHeight }); 
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    // ??? Why this "re-ordering" on load? 
    $('#slider ul li:last-child').prependTo('#slider ul'); 

    // Hide all slide-info item except the first 
    $("#slide_info li").not("#slide_info li:nth-child(1)").hide(); 

    // Click handler 
    $('a.control_next').click(function() { 

    // Animate the slides 
    $('#slider ul').animate({ 
     left: - slideWidth 
    }, 300, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 

    // Animate slide infos 
    // Get the visible one into a variable 
    var visible = $("#slide_info li:visible"); 
    // Fade it out and fade in the next one 
    visible.fadeOut(300, function(){ 
     // This is a callback, so after the fadeOut: 
     visible.next().fadeIn(300,function(){ 
     // This is also a callback... 
     // "visible" is now faded out, but still in this variable. 
     // Append it to the end of the list. 
     visible.appendTo("#slide_info"); 
     }); 
    }) 
    }); 

}); 

Your Fiddle updated