javascript - div “flickers” 和淡出/淡入移动

Question

我遇到了此处描述的相同问题:same problem ( fiddle :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/