Search jQuery

jQuery Forum

Animate disrupted by internal elements

in Getting Started • 3 months ago

Hi, i'm having some issues with my jquery application. I'm making an accordion navigation menu (I know there are plenty out there to use, but this is for learning purposes). When the user hovers over a div it expands and the others contract, and this works fine. However the issue I'm running into is that if I move the mouse over other elements within the div while the animation is running it stops for a split second and the continues, causing it to look choppy. Any idea what causes this?

Here is my jquery code:

$(document).ready(function() {

    $("#divAccordianContainer").mouseout(function() {
        $("#AccordianPanel1").stop().animate({ width: 198 }, 350);
        $("#AccordianPanel2").stop().animate({ width: 198 }, 350);
        $("#AccordianPanel3").stop().animate({ width: 198 }, 350);
        $("#AccordianPanel4").stop().animate({ width: 198 }, 350);
        $("#AccordianPanel5").stop().animate({ width: 198 }, 350);
    });

    $("#AccordianPanel1").mouseover(function() {
        $("#AccordianPanel1").stop().animate({ width: 794 }, 500);
        $("#AccordianPanel2").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel3").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel4").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel5").stop().animate({ width: 49 }, 500);
    });

    $("#AccordianPanel2").mouseover(function() {
        $("#AccordianPanel1").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel2").stop().animate({ width: 794 }, 500);
        $("#AccordianPanel3").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel4").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel5").stop().animate({ width: 49 }, 500);
    });

    $("#AccordianPanel3").mouseover(function() {
        $("#AccordianPanel1").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel2").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel3").stop().animate({ width: 794 }, 500);
        $("#AccordianPanel4").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel5").stop().animate({ width: 49 }, 500);
    });

    $("#AccordianPanel4").mouseover(function() {
        $("#AccordianPanel1").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel2").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel3").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel4").stop().animate({ width: 794 }, 500);
        $("#AccordianPanel5").stop().animate({ width: 49 }, 500);
    });

    $("#AccordianPanel5").mouseover(function() {
        $("#AccordianPanel1").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel2").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel3").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel4").stop().animate({ width: 49 }, 500);
        $("#AccordianPanel5").stop().animate({ width: 794 }, 500);
    });
});

Thanks.

Replies(3)

jakecigar

Re: Animate disrupted by internal elements

3 months ago

I played with your code. I came up with an alternate way with no extra IDs. It seems to work cleanly. Does it work for you?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
var accordian=$('#divAccordianContainer'),
panels=accordian.children()
accordian.mouseleave(function() {
panels.stop(true,true).animate({ width: 198 },350,'linear');
})
panels.on('mouseover',function mouseover(){
$(this).stop(true,true).animate({ width: 794 }, 500,'linear');
panels.not(this).stop(true,true).animate({ width: 49 }, 500,'linear');
})
})
</script>
<title>accordian</title>
<style type="text/css">
#divAccordianContainer { display: table-row ;width:990px;overflow:hidden}
#divAccordianContainer div{ display: table-cell; ;width:198px;height:200px}
</style>
</head>
<body>
<div id="divAccordianContainer">
<div style="background:red"></div>
<div style="background:yellow"></div>
<div style="background:red"></div>
<div style="background:yellow"></div>
<div style="background:red"></div>
</div>
</body>
</html>

JΛ̊KE

vandel212

Re: Animate disrupted by internal elements

3 months ago

Thank you this seems to be much more efficient code. The issue I'm having with this is that it still does the same thing as mine (with disrupting the animate), but also if I throw a some text in one of the divs, the width of that div never gets smaller than the text.

For Example:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
    $(function(){
        var    accordian=$('#divAccordianContainer'),
            panels=accordian.children()
        accordian.mouseleave(function() {
            panels.stop(true,true).animate({ width: 198 },350,'linear');
        })
        panels.on('mouseover',function mouseover(){
            $(this).stop(true,true).animate({ width: 794 }, 500,'linear');
            panels.not(this).stop(true,true).animate({ width: 49 }, 500,'linear');
        })
    })
    </script>
    <title>accordian</title>
    <style type="text/css">
    #divAccordianContainer { display: table-row ;width:990px;overflow:hidden}
    #divAccordianContainer div{ display: table-cell; ;width:198px;height:200px}
    </style>
</head>
<body>
<div id="divAccordianContainer">
<div style="background:red">
<p>frdgrefregretdsfsgertwetw</p>
</div>
<div style="background:yellow"></div>
<div style="background:red"></div>
<div style="background:yellow"></div>
<div style="background:red"></div>
</div>
</body>
</html>

jakecigar

Re: Animate disrupted by internal elements

3 months ago

it’s all in the CSS!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
var accordian=$('#divAccordianContainer'),
panels=accordian.children()
accordian.mouseleave(function() {
panels.stop(true,true).animate({ width: 198 },350,'linear');
}).trigger('mouseleave')
panels.on('mouseover',function mouseover(){
$(this).stop(true,true).animate({ width: 794}, 500,'linear');
panels.not(this).stop(true,true).animate({ width: 49}, 500,'linear');
})
})
</script>
<title>accordian</title>
<style type="text/css">
body{min-width:990px;}
#divAccordianContainer
{
display: block;
width: 1200px;
}
#divAccordianContainer>div
{
display: inline-block;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="divAccordianContainer">
<div style="background:red">
<div>
frdgrefregretdsfsgertwetw
</div>
</div>
<div style="background:yellow">
<div>
frdgrefregretdsfsgertwetw
</div>
</div>
<div style="background:red">
<div>
frdgrefregretdsfsgertwetw
</div>
</div>
<div style="background:yellow">
<div>
frdgrefregretdsfsgertwetw
</div>
</div>
<div style="background:red">
<div>
frdgrefregretdsfsgertwetw
</div>
</div>
</div>
<input type="text" size="1" maxlength="3" />
</body>
</html>

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Animate disrupted by internal elements

Replies(3)

Re: Animate disrupted by internal elements

Re: Animate disrupted by internal elements

Re: Animate disrupted by internal elements

Statistics

Tags

Actions

Related Posts