CODEWITHSUNDEEP
jqueryhtmlcss
Michi
Michi

Reputation: 5471

De-activate blinking of fadeToggle

HTML: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Button">Button
  <div class="FadeItem">
    <ul>                    
      <li>Main Menu A </li>
      <li class="Button">Main Menu B
        <div class="FadeItem">
          <ul>
            <li>Sub Menu B</li>
            <li>Sub Menu B</li>
          </ul>
        </div>  
      </li> 
    </ul>       
  </div>        
</div>

CSS:

.button{
  float: left;
}

.FadeItem{
  display: none;
}

jQuery:

$(document).ready(function () {
  $(".Button").hover(function(){
    $(".FadeItem").fadeToggle(500);
  });
});

As you can see the simple code above fades in the content of some items. The problem is when I put the cursor over the fadein content it is blinking but I want that the content is displayed without blinking.

Do you have any idea what I need to change in my code to de-activate the blinking?

https://jsfiddle.net/0tfuobpw/1/

Upvotes: 1

Views: 460

Answers (3)

Frits
Frits

Reputation: 7614

The reason for the blinking effect is thanks to the .hover() event you are using. The .hover() event triggers every time the mouse is moved whilst on the element specified, which means that every time you move your mouse over the menu (it toggles in, then out, then in, then out, etc).

You can fix this by splitting your .hover() function into two separate functions for .mouseenter() and .mouseleave() like this:

$(document).ready(function () {
    $(".Button").mouseenter(function(){
        $(".FadeItem").fadeIn(500);
    });
  $(".Button").mouseleave(function(){
        $(".FadeItem").fadeOut(500);
    });
});

Here's an updated fiddle, alternatively, below is a snippet:

$(document).ready(function() {
  $(".Button").mouseenter(function() {
    $(".FadeItem").fadeIn(500);
  });
  $(".Button").mouseleave(function() {
    $(".FadeItem").fadeOut(500);
  });
});
.Button {
   float: left;
   border: 1px solid red;
 }
 
 .FadeItem {
   display: none;
   border: 1px solid blue;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Button">Button
  <div class="FadeItem">
    <ul>
      <li>Main Menu A </li>
      <li class="Button">Main Menu B

        <div class="FadeItem">
          <ul>
            <li>Sub Menu B</li>
            <li>Sub Menu B</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

Lastly, based on your classes in your HTML I would assume that the display effect would need to separate the sub-menu and the sub-sub-menu.

You can do this by changing your selector to include .children()

Purely for interests sake, here's a fiddle and a snippet showing you how to achieve that.

$(document).ready(function() {
  $(".Button").mouseenter(function() {
    $(this).children(".FadeItem").fadeIn(500);
  });
  $(".Button").mouseleave(function() {
    $(this).children(".FadeItem").fadeOut(500);
  });
});
.Button {
   float: left;
   border: 1px solid red;
 }
 
 .FadeItem {
   display: none;
   border: 1px solid blue;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Button">Button
  <div class="FadeItem">
    <ul>
      <li>Main Menu A </li>
      <li class="Button">Main Menu B
        <div class="FadeItem">
          <ul>
            <li>Sub Menu B</li>
            <li>Sub Menu B</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

Upvotes: 2

Oktay KOSE
Oktay KOSE

Reputation: 163

UPDATE:

You do not need js for this: D

.FadeItem{
  display:none;
  transition: all 0.5s ease;
}
.Button:hover>.FadeItem{
  display:block;
  transition: all 0.5s ease;
}
<div class="Button">Button

	<div class="FadeItem">
	
		<ul>					
			<li>Main Menu A </li>
			<li class="Button">Main Menu B
		
				<div class="FadeItem">
					<ul>
						<li>Sub Menu B</li>
						<li>Sub Menu B</li>
					</ul>
				</div>	
				
			</li>	
			
		</ul>	
		
	</div>	
	
</div>

Upvotes: 5

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Updated fiddle.

The blinking effect comes from the fade so if you don't want it you could use simply the jQuery method toggle() instead :

$(document).ready(function () {
  $(".Button").hover(function(){
    $(".FadeItem").toggle();
  });
});

Or you could use show/hide methods like :

$(document).ready(function () {
  $( ".Button" ).hover(
    function() {
      $(".FadeItem").show();
    }, function() {
      $(".FadeItem").hide();
  });
});

Hope this helps.

$(document).ready(function () {
  $( ".Button" ).hover(
    function() {
      $(".FadeItem").show();
    }, function() {
      $(".FadeItem").hide();
  });
});
.button{
  float: left;
}

.FadeItem{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Button">Button
  <div class="FadeItem">
    <ul>					
      <li>Main Menu A </li>
      <li class="Button">Main Menu B

        <div class="FadeItem">
          <ul>
            <li>Sub Menu B</li>
            <li>Sub Menu B</li>
          </ul>
        </div>	

      </li>	
    </ul>	
  </div>	
</div>

Upvotes: 2

Related Questions