Whenever the mouse hovers over my div with the class .frame, I slideToggle a div with the class .content. And when the mouse leaves .frame, I toggle .content back again. Everything seems to be working fine except for two issues: the effect gets messed up if the mouse enters and exits .frame quickly, and for some reason, .frame and .content are not aligned properly.
Here is my CSS:
.frame{
border-style:solid;
border-width:1px;
width:10%;
position:relative;
}
.content {
border-style:solid;
border-width:1px 1px 0px 1px;
position:absolute;
display:none;
}
This is my HTML:
<br><br>
<div class="frame">
<div class="content"></div>
<div class="inside">bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br /></div>
</div>
And here is the jQuery code:
$(document).on('mouseenter', '.frame', function() {
var el = $(this);
content = $(".content");
content.css({"bottom":el.height(),"width":el.width()});
content.html('ok ok ok ok');
el.css("border-top-color","#FFFFFF");
content.slideToggle(300);
}).on('mouseleave','.frame', function() {
var el = $(this);
content = $(".content");
content.stop().slideToggle(300, function(){
content.html('');
el.css("border-top-color","#000000");
});
});
For reference, you can check out this jsfiddle link: http://jsfiddle.net/malamine_kebe/Uj2yh/