Animate element on click & mouseenter/mouseleave on that element and other
Question
I have 3 main div elements in the following layout.
https://jsfiddle.net/wpztofb7/
<body>
<div id="topBox" class="otherBox">
TEST TOP
</div>
<div id="middleBox" class="middleBox">
SECTION
</div>
<div id="tab" class="tab"><span>New Comment</span></div>
<div id="bottomBox" class="otherBox">
TEST BOTTOM
</div>
</body>
.otherBox {
border: 2px solid #73AD21;
width: 100%;
height: 150px;
}
.middleBox {
border: 2px solid #73AD21;
width: 100%;
height: 25px;
}
.tab {
border-left: 2px solid #73AD21;
border-right: 2px solid #73AD21;
border-bottom: 2px solid #73AD21;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
height: 15px;
width: 120px;
margin-bottom: 20px;
}
$(document).ready(function() {
click = 0;
$("#tab, #middleBox").click(function() {
if (click === 0) {
click = 1;
$("#middleBox").animate({
height: '400px'
}, 500);
} else {
click = 0;
$("#middleBox").animate({
height: '30px'
}, 850);
};
});
if (click === 0) {
//Do wiggle
$("#tab, #middleBox").mouseenter(function() {
$("#middleBox").animate({
height: "40px"
}, 800);
});
$("#middleBox").mouseleave(function() {
$("#middleBox").animate({
height: "30px"
}, 800);
});
}
});
The Middle div has a small tab to the bottom left. The desire is to have the middle div animate on click of either itself or the tab. Whereas a "wiggle" animation is required on mouseenter/mouseleave to draw the user attention to the extendable div element.
The behavior goes awry when the tab mouseover is activated followed by a click activation. The mouse is then positioned within the extended middle div, but any mouse movement collapses the div.
Could someone point me in the right direction to avoid this issue? I'm new to this stuff, so be gentle!
I've tried .off("mouseenter mouseleave") on the relevant elements to no avail.
Ideally, a user should be able to mouseenter/leave the tab or div to activate a "wiggle". If when in the tab or div, the user clicks, the div should be animated and stay in that state until clicked again (even if mouseleave occurs).
1 answers
solution1
0 ACCPTED 2016-03-04 16:26:48
I've clearly jumped the gun in asking the question too early. A bit more perseverance and I have sorted the issue.
I've figured out the correct use of .off()
If anyone has a better or more appropriate way of doing the same task, please feel free to post it. Or if there is any critique of my code...
<script>
$(document).ready(function () {
click = 0;
$("#tab, #middleBox").click(function () {
if (click === 0) {
click = 1;
$("#middleBox").animate({ height: '400px' }, 500);
$("#middleBox, #tab").off("mouseenter mouseleave");
}
else {
click = 0;
$("#middleBox").animate({ height: '30px' }, 850);
};
});
if (click === 0) {
//Do wiggle
$("#tab, #middleBox").mouseenter(function () {
$("#middleBox").animate({ height: "40px" }, 800);
});
$("#middleBox").mouseleave(function () {
$("#middleBox").animate({ height: "30px" }, 800);
});
}
}); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.