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

Question

我遇到的问题与此处描述的相同：same problem（小提琴：original fiddle）但我还不了解JS，我正在学习代码，所以当我的html代码有点不同时就像现在一样，我不知道如何将解决方案应用到它上面。你能帮帮我吗？当我看到它应该是什么时，我可以学习它。

我的代码：

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

解决方案：

$('#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

哇，这需要很多代码来审核。我不肯定这会解决你的问题。你没有任何悬停事件，所以我认为闪烁可能与CSS有关。

// 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();

});

我添加了一个代码段，您可以对其进行测试。

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

<强>更新 你正在遭遇的是两个div（一个淡出，一个淡入）被切换的时刻。你需要绝对定位这些div来解决这个问题。然后它们相互重叠，你不必担心闪烁。这可能会对布局产生重大影响。然后你开始计算那些孩子div和各种东西的高度： https://jsfiddle.net/SbKQ3/29/

Answer 2

怎么样？我只在隐藏了所有元素时才使用promises到fadeToggle，从而避免了闪烁效果。

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