The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

Question

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assist me with this? Once I see how it should be done, I can use it as a learning opportunity.

This is my current 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;
});

javascript jquery html css

Answer 1

Answer №1

That's quite a bit of code to review. I'm not entirely sure if this will fix your issue. Since there are no hover events included, the flickering may be related to CSS.

// Consider using a better selector - the markup doesn't have #1, #2, #3, etc.
// Can you modify this to target $('.container div') or something based on the actual markup?
$('div').on('click', function() {

  // Get the ID of this element
  var id = $(this).attr('id');

  // Locate the corresponding div ID, which appears to be 100 greater than the original ID
  $('#1'+id).fadeToggle()
      // Hide all sibling elements
      .siblings().fadeOut();

});

I've provided a snippet for testing below.

$(function() { // Equivalent to onDomReady
  $('button').on('click', function() {
    // Get the ID of this element
    var id = $(this).attr('id');

    // Locate the corresponding div ID, which appears to be 100 greater than the original ID
    $('#1' + id).fadeToggle()
      // Hide all sibling elements
      .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: The issue you're facing is when both divs (one fading out and one fading in) are toggling at the same time. To resolve this, consider positioning those divs absolutely. This way, they overlap each other and eliminate the flickering. However, keep in mind that this can significantly impact the layout. For more information, refer to this link.

Answer 2

That's quite a bit of code to review. I'm not entirely sure if this will fix your issue. Since there are no hover events included, the flickering may be related to CSS.

// Consider using a better selector - the markup doesn't have #1, #2, #3, etc.
// Can you modify this to target $('.container div') or something based on the actual markup?
$('div').on('click', function() {

  // Get the ID of this element
  var id = $(this).attr('id');

  // Locate the corresponding div ID, which appears to be 100 greater than the original ID
  $('#1'+id).fadeToggle()
      // Hide all sibling elements
      .siblings().fadeOut();

});

I've provided a snippet for testing below.

$(function() { // Equivalent to onDomReady
  $('button').on('click', function() {
    // Get the ID of this element
    var id = $(this).attr('id');

    // Locate the corresponding div ID, which appears to be 100 greater than the original ID
    $('#1' + id).fadeToggle()
      // Hide all sibling elements
      .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: The issue you're facing is when both divs (one fading out and one fading in) are toggling at the same time. To resolve this, consider positioning those divs absolutely. This way, they overlap each other and eliminate the flickering. However, keep in mind that this can significantly impact the layout. For more information, refer to this link.

Answer 3

Answer №2

Isn't that interesting? By utilizing promises and employing fadeToggle only when all elements were hidden, I successfully eliminated the flickering effect.

$(function() { // onDomReady equivalent
  $('button').on('click', function() {
    // obtain the id of this element
    var id = $(this).attr('id');

    // locate the corresponding div ID, which appears to be 100 greater than the 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>

Answer 4

Isn't that interesting? By utilizing promises and employing fadeToggle only when all elements were hidden, I successfully eliminated the flickering effect.

$(function() { // onDomReady equivalent
  $('button').on('click', function() {
    // obtain the id of this element
    var id = $(this).attr('id');

    // locate the corresponding div ID, which appears to be 100 greater than the 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>

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

Answer №1

Answer №2

Similar questions

Error message reading "Unexpected type error in jQuery for Node. Argument 'context' required."

There is a method in TypeScript called "Mapping IDs to Object Properties"

Locate the parent and child elements within an array

An array is not just a mere collection of elements

Access model information from a controller with the help of Next.js and Sequelize

Using a try block inside another try block to handle various errors is a common practice in JavaScript

Creating a toggle feature using ng-switch

Unequal height among each div's elements

Is there a way to synchronize breakpoint values across different media queries?

Spirit.py navigates using javascript

Why isn't res.send() in Node.js sending the message?

"How to Develop an Eraser Tool Using EaselJs - Exploring Further Possibilities

Is it possible to create Excel documents containing statistical graphs and pie charts by utilizing PHP and SQL?

Retrieve nested JSON data from an AJAX request

Responsive Navigation Bar with Bootstrap

Exploring the Efficiency Enhancements in the next/image Optimization Process within Next.js

Encountering a Tailwindcss error while attempting to compile the CSS file

I'm having trouble getting the float left to work properly in my HTML/CSS code

Ways to retrieve the checkbox value using PHP in conjunction with XML

Upon installing a global npm package, the system encountered an error stating: 'File or directory not found: ENOENT'