CODEWITHSUNDEEP
jqueryhtmlcss
thommylue
thommylue

Reputation: 170

Jquery toggle slide bugs

Sorry for asking it again, but I still don't have an answer on my old question... I have to fix this today, I hope you guys can help me.

I have a jquery hover.

It's a div in a div, the div with the hover is called .flip and the div which expands is called .panel.

The hover bugs, when I go over .flip expands .panel. But panel is in the div .flip so the hovering flip will be as big as .flip + the size of .panel. And .flip has to be as width as .panel what i don't want..

I know that its possible to let .panel out of .flip but it has to stay in there. Else all the .panel's will expand when i hover over one of the 5 .flip's. So I have to use $this.

The second problem is, that when i go 2, 3, 4 or more times over the .flip, .panel will expand 2, 3, 4 or more times and that looks laggy.

Can you help me? I know nothing about jquery, so I even don't know where to search for.

Here is the link: http://staging.skyberate.nl/shared-hosting/magento-hosting/referenties/

Code:

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

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

css:

<style type="text/css"> 
.flip{
     cursor: pointer;
     background-color:white;
     width:490px;
    margin-left: 43px;
    color:#1667b2;
    text-align:center;
    border-top; 2px #1667b2 solid
    display:block;
}

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

#meerreferenties {
    width:auto;
    float:left;
}

</style>

html:

<div class="flip">Klik hier voor meer informatie.
    <div class="panel">Hier komt de informatie te staan over de hosting van Chocstar.
        Hier komt de informatie te staan over de hosting van Chocstar.
        Hier komt de informatie te staan over de hosting van Chocstar.
        Hier komt de informatie te staan over de hosting van Chocstar.
        Hier komt de informatie te staan over de hosting van Chocstar.
        Hier komt de informatie te staan over de hosting van Chocstar.
    </div>
</div>

Fiddle: http://jsfiddle.net/4bTL5/

Upvotes: 0

Views: 358

Answers (2)

Daan
Daan

Reputation: 2799

It's just as easy as changing your jQuery from:

$(".flip").hover(function(){
    $(this).find(".panel").slideToggle("slow"); 
});

to:

$(".flip").hover(function(){
    $(this).find(".panel").stop().slideToggle("slow"); 
});

JSFiddle demo

Explanation:

This basically just stops the current jQuery animation .slideToggle. It doesn't complete the animation (going to the bottom), but goes back immediately, as it should, cause it's a slideToggle animation on a hover function.

Extra help:

As I helped you yesterday and I know what you kind of want, I fixed your css, I think it isn't how you wanted it to be.

JSFiddle with blueline ^^

Upvotes: 1

Arjun
Arjun

Reputation: 1439

For your first problem you can use position:absolute for child div so parent div will not take a height of a absolute div, and for second problem you can use stop() before slideToggle. Check this...http://jsfiddle.net/4bTL5/14/

Upvotes: 1

Related Questions