CODEWITHSUNDEEP
jqueryhtmlcss
thommylue
thommylue

Reputation: 170

Jquery toggle sometimes wont come out for 100%

I have a toggle jquery bug, with help from here, there are many bugs fixed but one bug stays.

When your mouse enters "meer informatie" then will a child div slide down. When you leave "meer informatie" before .panel has finished sliding down, then the next time you enter "meer informatie" it won't slide down for 100%

And i got a second question but i think i have to ask that in a new "ask question"

url of the staging page: http://staging.skyberate.nl/shared-hosting/magento-hosting/referenties/

I think it's a little bit like this problem, but don't really understand it:P like this: jquery toggle sometimes does not work

jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
$(document).ready(function(){ 
$(".flip").mouseenter(function(){
$(this).find(".panel").stop().slideToggle("slow"); 
});
$(".flip").mouseleave(function() {
$(this).find(".panel").stop().slideToggle("slow");
});
}); 
</script>

css:

.flip{
 cursor: pointer;
 background-color:white;
 width:490px;
margin-left: 43px;
color:#1667b2;
text-align:center;
border-bottom: 2px solid #1667b2;
display:block;
}

.panel
{
width:480px;
color:white;
background-color:#1667b2;
float:left;
margin:0px;
display:none;
padding:5px;
}

#meerreferenties {
width:auto;
float:left;
margin-top:10px;
}

and the html:

<div class="flip"><p>Meer informatie</p>
<div class="panel"><p>Hier komt de informatie te staan over de desbetreffende hosting.
Hier komt de informatie te staan over de desbetreffende hosting.
Hier komt de informatie te staan over de desbetreffende hosting.
    Hier komt de informatie te staan over de desbetreffende hosting.
Hier komt de informatie te staan over de desbetreffende hosting.
Hier komt de informatie te staan over de desbetreffende hosting.
Hier komt de informatie te staan over de desbetreffende hosting.</p>
</div>
</div>

Upvotes: 1

Views: 303

Answers (1)

Niklas
Niklas

Reputation: 13135

You're probably using an older version of jQuery (before 1.7) where the stop() function is not doing what you're expecting. Here you can read more about what jQuery says about the stop() function:

As of jQuery 1.7, stopping a toggled animation prematurely with .stop() will trigger jQuery's internal effects tracking. In previous versions, calling the .stop() method before a toggled animation was completed would cause the animation to lose track of its state (if jumpToEnd was false). Any subsequent animations would start at a new "half-way" state, sometimes resulting in the element disappearing.

I can see two solutions for you:

1 - Update your jQuery version to 1.7 or newer.

2 - Call the stop function like this, with two true parameters: .stop(true,true).

$(document).ready(function () {
    $(".flip").mouseenter(function () {
        $(this).find(".panel").stop(true,true).slideToggle("slow");
    });
    $(".flip").mouseleave(function () {
        $(this).find(".panel").stop(true,true).slideToggle("slow");
    });
});

Here's a DEMO of this. The top information will be buggy while the bottom one will work. You can see that I'm using jQuery 1.6 here. If you switch to 1.7 both should work.

Upvotes: 1

Related Questions