div“闪烁”，并在fadeOut / fadeIn上移动

Question

I have the same problem that is described here: same problem (fiddle: original fiddle ) but I dont understand JS yet, I am learning as I code, so when my html code is little bit different as it is now, I dont know, how to apply the solution onto it. Could You help me please with that? When I see, how it should look, I can learn it then.

My code:

<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%;">
        <div id="101" style="display:none;"><!-- Content here --></div>
        <div id="102" style="display:none;"><!-- Content here --></div>
        <div id="103" style="display:none;"><!-- Content here --></div>
        <div id="104" style="display:none;"><!-- Content here --></div>
        <div id="105" style="display:none;"><!-- Content here --></div>
        <div id="106" style="display:none;"><!-- Content here --></div>
        <div id="107" style="display:none;"><!-- Content here --></div>
        <div id="108" style="display:none;"><!-- Content here --></div>
        <div id="109" style="display:none;"><!-- Content here --></div>
        <div id="110" style="display:none;"><!-- Content here --></div>
        <div id="111" style="display:none;"><!-- Content here --></div>
        <div id="112" style="display:none;"><!-- Content here --></div>
        <div id="113" style="display:none;"><!-- Content here --></div>
    </div>
</div>

<script type="text/javascript">

    $("#1").on('click', function() {
    $("#101").fadeToggle();
    $("#102,#103,#104,#105,#106,#107,#108,#109,#110,#111,#112,#113").fadeOut();
    });

    $("#2").on('click', function() {
    $("#102").fadeToggle();
    $("#101,#103,#104,#105,#106,#107,#108,#109,#110,#111,#112,#113").fadeOut();
    });

    // and so on, until #13 
</script>

Solution:

$('#indexNav').click(function() {
$('#aboutContent').fadeOut('fast',function(){
    $('#indexContent').fadeIn('fast');
});
return false;
});
$('#aboutNav').click(function() {
$('#indexContent').fadeOut('fast',function(){
    $('#aboutContent').fadeIn('fast');
});
    return false;
});

Answer 1

Wow, thats a lot of code to review. I'm not positive this is going to solve your problem. You don't have any hover events on this, so I assume flicker may be CSS related.

// better selector - you don't have markup for #1, #2, #3, etc.
// can you rework this to be $('.container div') or something based on real markup
$('div').on('click', function() {

  // get this element's id
  var id = $(this).attr('id');

  // find the corresponding div ID, which seems to be 100 greater than original ID
  $('#1'+id).fadeToggle()
      // find all siblings and hide them
      .siblings().fadeOut();

});

I've added a snippet so you can test it.

 $(function() { // equivalent to onDomReady $('button').on('click', function() { // get this element's id var id = $(this).attr('id'); // find the corresponding div ID, which seems to be 100 greater than original ID $('#1' + id).fadeToggle() // find all siblings and hide them .siblings().fadeOut(); }); }); 

 div div div { border: 1px solid black; margin: 3px; background: red; } 

 <button id="01">01</button> <button id="02">02</button> <button id="03">03</button> <button id="04">04</button> <button id="05">05</button> <button id="06">06</button> <button id="07">07</button> <button id="08">08</button> <button id="09">09</button> <button id="10">10</button> <button id="11">11</button> <button id="12">12</button> <button id="13">13</button> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%;"> <div id="101" style="display: none;">101</div> <div id="102" style="display: none;">102</div> <div id="103" style="display: none;">103</div> <div id="104" style="display: none;">104</div> <div id="105" style="display: none;">105</div> <div id="106" style="display: none;">106</div> <div id="107" style="display: none;">107</div> <div id="108" style="display: none;">108</div> <div id="109" style="display: none;">109</div> <div id="110" style="display: none;">110</div> <div id="111" style="display: none;">111</div> <div id="112" style="display: none;">112</div> <div id="113" style="display: none;">113</div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Update What you're suffering from is the moment of time when both divs (one fading out, and one fading in) are being toggled. You'll need to position those divs absolutely to get around this. Then they're overlapping each other and you don't need to worry about the flicker. That can have big impacts on layout. Then you get into calculating heights of those child divs and all sorts of stuff: https://jsfiddle.net/SbKQ3/29/

Answer 2

How about that? I used promises to fadeToggle only when all elements were hidden, which prevented the flickering effect.

 $(function() { // equivalent to onDomReady $('button').on('click', function() { // get this element's id var id = $(this).attr('id'); // find the corresponding div ID, which seems to be 100 greater than original ID $.when($('#1' + id).siblings().fadeOut()).done(function() { $('#1' + id).fadeToggle(); }); }); }); 

 div div div { border: 1px solid black; margin: 3px; background: red; } 

 <button id="01">01</button> <button id="02">02</button> <button id="03">03</button> <button id="04">04</button> <button id="05">05</button> <button id="06">06</button> <button id="07">07</button> <button id="08">08</button> <button id="09">09</button> <button id="10">10</button> <button id="11">11</button> <button id="12">12</button> <button id="13">13</button> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%;"> <div id="101" style="display: none;">101</div> <div id="102" style="display: none;">102</div> <div id="103" style="display: none;">103</div> <div id="104" style="display: none;">104</div> <div id="105" style="display: none;">105</div> <div id="106" style="display: none;">106</div> <div id="107" style="display: none;">107</div> <div id="108" style="display: none;">108</div> <div id="109" style="display: none;">109</div> <div id="110" style="display: none;">110</div> <div id="111" style="display: none;">111</div> <div id="112" style="display: none;">112</div> <div id="113" style="display: none;">113</div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>