CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user8393506
user8393506

Reputation:

Mouseenter and mouseleave firing at the same time

Mouseenter and mouseleave firing at the same time. All i wanna do is to hide element when the mouse is on, and show if out

$('#myid').on('mouseenter', function(event) {
  $(this).fadeOut();
});

$('#myid').on('mouseleave', function(event) {
  $(this).stop().fadeIn();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid" >{{property}}</span>

Upvotes: 6

Views: 2940

Answers (5)

ankita patel
ankita patel

Reputation: 4251

Please try this.

$('#myid').on('mouseenter', function(event) {
  $(this).css('opacity', 0);
});

$('#myid').on('mouseleave', function(event) {
  $(this).css('opacity',1);
});
#myid{
  -webkit-transition:0.5s;
  transition:0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid" >{{property}}</span>

Upvotes: 0

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

You can try this: add CSS: 

#mydiv { -webkit-transition: all 0.3s;  -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

add jQuery :

jQuery("#mydiv").mouseenter(function(event) {
        jQuery(this).css({
            opacity: '0'
        });
    });
    jQuery("#mydiv").mouseleave(function(event) {
        jQuery(this).css({
            opacity: '1'
        });
    });

Upvotes: 0

Tejasvini Vyas
Tejasvini Vyas

Reputation: 49

You can try with this

$('#myid').on('mouseenter', function(event) {
  $(this).hide();
});

$('#myid').on('mouseleave', function(event) {
  $(this).fadeIn();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid">{{property}}</span>

Upvotes: 0

Rajesh
Rajesh

Reputation: 24915

You can also achieve this effect using only CSS.

#myid {
  opacity: 1;
  transition: 0.4s;
}

#myid:hover {
  opacity: 0;
  transition: 0.4s;
}
<span id="myid" >{{property}}</span>

Upvotes: 3

roberrrt-s
roberrrt-s

Reputation: 8210

Per @Terry's comment, the fadeOut event animates the opacity to 0, and then sets the display to none which hides the element and triggers the mouseleave event (since it's no longer hovering something that isn't displayed.

Simply animate the opacity instead of the display (fadeIn, fadeOut)

$('#myid').on('mouseenter', function(event) {
  $(this).animate({'opacity': 0});
});

$('#myid').on('mouseleave', function(event) {
  $(this).animate({'opacity': 1});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid" >{{property}}</span>

Upvotes: 7

Related Questions