I want to apologize for my head if this post-question may be too specific to help others.
I am really struggling with the website that I am developing. I use several jquery animations at the same time, and sometimes the animation works, and sometimes not. To be more specific:
1) The animation is supposed to hide and reduce the font size of all members of the same class, except for the member of the class that was clicked. The hide function works sequentially, but the font resize function does not occur for all elements except the first element in the class.
2) When the "home" div clicks (.yhs), the font should return to its original size. However, it does not change even if it is called in .animate ().
Here is a working link to the test site:
LINK TO WORKING EXAMPLE
As for the source code, here is the HTML and JS:
I also welcome any other additional comments you may have, and I apologize again for posting such a specific question, but I would not do this if I had not spent several days on this issue. Thank.
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 use the typing algorithm for short)
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%'});
});
}