Trouble with JQuery Animate
Question
I want to apologize a head of time if this post question may be too specific to help others.
I really am struggling here with a website that I am designing. I am using several jquery animations simultaneously and sometimes the animation works and sometimes it doesn't. To be more specific:
1) The animation is supposed to hide and shrink the font-size of all of the members of a single class except for the member of the class that was clicked. The hiding function works consistently, but the font-size changing function does not occur for all the elements except for the first element in the class.
2) When the "home" div is click (.yhs) the font is supposed to return to its original size. However, it does not change even though it is called in .animate().
Here is the working link to the test website:
As far as source code, here is the HTML and the JS:
I would also welcome any other additional comments that you may have and once again i am sorry for posting such a specific question, but I would not have done so if I had not already spent several days on this problem. Thanks.
HTML:
<html>
<head>
<title>Yonkers Historical Society</title>
<script src="java-resources/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/header.css">
<script src="java-resources/jquery.animate-colors-min.js"></script>
<script src="java-resources/jquery.transit.min.js"></script>
<script src="java-resources/typed.min.js"></script>
<script src="java-resources/header-setup.js"></script>
</head>
<body>
<div class = "main">
<div class = "title yhs one" id = "nav"></div>
<div class = "title regular two" id = "nav"></div>
<div class = "title regular three" id = "nav"></div>
<div class = "title yhs four" id = "nav"></div>
<div class = "title regular five" id = "nav"></div>
<div class = "title yhs six" id = "nav"></div>
<div class = "title regular seven" id = "nav"></div>
<div class = "title regular eight" id = "nav"></div>
<div class = "title regular grey nine" id = "nav"></div>
<div class = "small ten"></div>
</div>
<div class = "text information"></div>
</body>
</html>
JS: (I did not include typing algorithm for brevity's sake)
function hoverFunction(){
$('.regular').hover(function(){$(this).stop(true).animate({color:'#6666FF'});},
function(){$(this).stop(true).animate({color:'black'});});
$('.yhs').hover(function(){$('.yhs').stop(true).animate({color:'black'});},
function(){$('.yhs').stop(true).animate({color:'navy'});});
$('.regular').click(function(){pageRedirectAnimation($('.regular').index(this));});
}
function pageRedirectAnimation(index){
$('.title.regular').not(':eq('+index+')').css("display","none");
$('.small').hide();
$('.yhs').animate({fontSize:'30px'}, 100);
$('.regular:eq('+index+')').animate({fontSize:'30px'}, 100);
$('.main').animate({height:'10%'}, 500);
setClickHome();
}
function setClickHome(){
$('.yhs').click(function(){
$('.yhs').animate({fontSize:'120px'});
$('.regular').css("display", "block").animate({fontSize: '120px'}, 100);
$('.small').show();
$('.main').animate({height:'100%'});
});
}
1 answers
solution1
0 ACCPTED 2015-08-27 18:24:08
The best way to avoid bogs with .animate() (or any CSS modifications through Javascript/Jquery) is to put a timer; change $('.yhs').animate({fontSize:'120px'}); by $('.yhs').animate({fontSize:'120px'}, 0); for exemple (it don't works every time thought). But the best way is to do it is with CSS classes combined with .delay() , .addClass() / .removeClass() , and .queue() / .dequeue()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.