I have a mouseover animation which is followed by a mouseleave animation. Unfortunately if the first animation has not been completed by the time the mouseleave event is triggered then the second animation does not take place. See my code below
HTML
<div class="wrapper">
<div class="top">
<div class="popup">
popup
</div>
</div>
<div class="bottom"></div>
</div>
CSS
.wrapper {
background-color:red;
padding:10px;
position:relative;
width:100px;
}
.top {
background-color:blue;
height:100px;
position:relative;
width:100px;
}
.bottom {
background-color:green;
cursor:pointer;
height:40px;
width:100px;
}
.popup {
background-color:yellow;
bottom:-10px;
display:none;
left:19px;
opacity:0;
padding:10px;
position:absolute;
}
Jquery
var popupVisible = false;
$('div.bottom').mouseover(function() {
if (popupVisible === false) {
$(this).parent().children('.top').children('.popup').css({'display':'block'}).animate({
opacity:1,
bottom:+10
}, 500, function() {
popupVisible = true;
});
}
});
$('.wrapper').mouseleave(function() {
if (popupVisible === true) {
$(this).children('.top').children('.popup').animate({
opacity:0,
bottom:-10
}, 300, function() {
$(this).css({'display':'none'});
popupVisible = false;
});
}
});
I have included my code in the JSFiddle page - https://jsfiddle.net/n0uxaw8c/1/
What I need is for the first animation to stop when the mouseleave event is triggered, then have the second animation run.
Many thanks for any help :)
Aucun commentaire:
Enregistrer un commentaire