CODEWITHSUNDEEP
javascriptjqueryhtmlcssslidetoggle
user2461031
user2461031

Reputation: 513

jquery, issue with slideToggle when the mouse is over

I have a div .frame, when the mouse is over it I slideToggle a div .content, and when the mouse is leaving .frame I slideToggle again .content again. It's working well but I have 2 issues: when the mouse is entering and leaving .frame really fast it's messing the effect, then I don't know why .frame and .content are not aligned.

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;
}

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 my jQuery:

    $(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");
    });
});

here a jsfiddle: http://jsfiddle.net/malamine_kebe/Uj2yh/

Upvotes: 0

Views: 113

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

For the first problem use - pass true, true as params to slideToggle

$(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.stop(true, true).slideToggle(300);  
}).on('mouseleave','.frame', function() {
    var el = $(this);
    content = $(".content");
    content.stop(true, true).slideToggle(300, function(){
        content.html('');
        el.css("border-top-color","#000000");
    });
});

For the alignment problem - the problem is the border is for frame element and the content is inside the frame, so the frames border will come outside contents border. Here the fix I used is to move the content to -px left

.content { 
    border-style:solid;
    border-width:1px 1px 0px 1px;
    position:absolute;
    display:none;
    left: -1px;
}

Demo: Fiddle

Upvotes: 1

Related Questions