allowing/ not allowing animation.
I am soooo confused, and cannot figure out the last most important part of this script. I've taken over somebody else's code and I'm new to Jquery.
On the page is a set of navigation and a set of images. When the user rolls over an item, the images animate expand/contract. Then, if they click on an item, a second animation moves the pictures and adds a php file to include in the page.
The problem is that the first rollover animation function still runs when the user mouses over images or text. I don't want it to do so, unless they've returned to the original arangement.
I hope that makes sense. I don't know any better way to explain it.
Here's the code. Stripped down, but essentially there.
the html:
- <!DOCTYPE html>
<html>
<head>
<title>The site</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300,300italic' rel='stylesheet' type='text/css'>
<script src="js/functions.js"></script>
</head>
<body>
<div id="testit" class="main_page"></div>
<div id="content" style="">
<div class="container">
<div class="header">
<div class="navbox">
<!-- later this nav will be separated out as an include -->
<ul class="main-nav">
<li><a href="#" class="main ee" id="link_nest">Link 1</a></li>
<li><a href="#" class="main bb" id="link_hillcrest">link 2</a></li>
<li><a href="#" class="main cc" id="link_3little">link3</a></li>
<li><a href="#" class="main dd" id="link_early">link 4</a>
</li>
<li><a href="#" class="main contact" id="link_contact">CONTACT</a></li>
</ul>
</div>
<div class="logo-main">
<ul class="main-nav">
<li><a href="#" class="main aa"><img src="images/logo.png"></a></li>
</ul>
</div>
</div>
<div class="square-container">
<div class="square one" id="sq1" style="overflow:hidden;">
<div id="square_caption1" class="square_captions">The Nest</div>
<div id="cf" style="overflow:hidden;height:100%;width:100%;">
<img class="bottom" style="width:100%;" src="images/the_nest_residences_1_color.jpg">
<img class="top" style="width:100%;" src="images/the_nest_residences_1.jpg">
</div>
</div>
<div class="gallery-subs" style="height:0px;overflow:visible; position:relative; top:340px;left:65px;z-index:40; display:none;opacity:0;">
<div style="height:30px;width:30px;background-color:#000000;float:left;margin-right:20px;">
<a href="images/examples/image-1.gif" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_1"><img src="images/gallery/nest_thumb1.jpg" id="nest_thumbs_1" class="gallery_thumbs"></a>
</div>
<div style="height:30px;width:30px;background-color:#ffffff;float:left;margin-right:20px;">
<a href="images/examples/image-2.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_2"><img src="images/gallery/nest_thumb2.jpg" id="nest_thumbs_2" class="gallery_thumbs"></a>
</div>
<div style="height:30px;width:30px;background-color:#000000;float:left;margin-right:20px;">
<a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_3"><img src="images/gallery/nest_thumb3.jpg" id="nest_thumbs_3" class="gallery_thumbs"></a>
</div>
</div>
<div class="square two" id="sq2" style="">
<div id="square_caption2" class="square_captions">Hillcrest Village</div>
<div id="cf" style="overflow:hidden;height:100%;width:100%;"">
<img class="bottom" style="height:120%;" src="images/the_nest_residences_2_color.jpg" id="pic_hillcrest_bw">
<img class="top" style="height:120%;" src="images/the_nest_residences_2.jpg" id="pic_hillcrest_color">
</div>
</div>
<div class="home-register">
<p class="reg1">Tasdfasdf</p>
<p class="reg2">EasdfasdfT</p>
<p class="reg3"><a href="#" class="main dd"><i>Click to Register</i></a></p>
</div>
</div>
<div class="details">
<h1>The Nest</h1>
<div class="article">
article
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and Jquery:
$(document).ready(function(){
if ($("#testit").hasClass('main_page')) {
/* now the image animations */
var $width_one = $("#sq1").width();
var $height_one = $("#sq1").height();
var $width_two = $("#sq2").height();
var $height_two = $("#sq2").height();
$(".square.one,#link_nest").hover(function(){
if (!$(".square.one").hasClass('animated')) {
$(".square.one").dequeue().stop().animate({ width:"155px",height:"219px" },240);
$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
$("#square_caption1").css('visibility','visible');
}
}, function() {
$(".square.one").addClass('animated').animate({ width:$width_one, height:$height_one }, "normal", "linear", function() {
$("#square_caption1").css('visibility','hidden');
$("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
$(this).removeClass('animated').dequeue();
});
});
$(".square.two,#link_hillcrest").hover(function(){
if (!$(".square.two").hasClass('animated')) {
$(".square.two").dequeue().stop().animate({ height:"225px",top:"108px" },240);
$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
$("#link_hillcrest").css({color:"#153d53",fontWeight:"400"},100);
$("#square_caption2").css('visibility','visible');
}
}, function() {
$(".square.two").addClass('animated').animate({ height:$height_two,top:"125px" }, "normal", "linear", function() {
$("#square_caption2").css('visibility','hidden');
$("#link_hillcrest").css({color:"black",fontWeight:"300"},100);
$(this).removeClass('animated').dequeue();
});
});
}else if ( $(this).hasClass('') ) {
/* do nothing */
};
/* end image animations */
/* start showing,hiding */
$('.square-container').on('click', '.square', function(event) {
$("#testit").removeClass("main_page");
$("#testit").addClass("sub_page");
if ( $(this).hasClass('active') ) {
$('.details h1').animate({ opacity: 0 }, 600, function() { $('.details h1').html(' '); });
$('.details .article').animate({ opacity: 0 }, 600, function() { $('.details .article').unload(); });
$('.one').stop().animate({ width: '135', height: '207', left: '648', top: '190', opacity: 1}, 600, function() { /*animation completed*/ });
$('.two').stop().animate({ width: '154', height: '208', left: '485', top: '125', opacity: 1}, 600, function() { /*animation completed*/ });
$('.three').stop().animate({ width: '245', height: '145', left: '231', top: '170', opacity: 1}, 600, function() { /*animation completed*/ });
$('.four').stop().animate({ width: '190', height: '139', left: '413', top: '340', opacity: 1}, 600, function() { /*animation completed*/ });
$('.square').removeClass('active');
} else if ( $(this).hasClass('one') ) {
/*hide the currently visible stuff*/
$('.details h1').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
$('.details .article').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
$('#sub-nav').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
/*Animate squares positions*/
$('.one').stop().animate({ width: '227', height: '320', left: '260', top: '26', opacity: 1}, 600, function() {
/*load content*/;
$('.details h1').html(' ');
$('.details .article').load('inc/the-nest.php');
$('.details h1').animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
$('.details .article').animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
$('.details .article').animate({ width: '400',left: '260', opacity: 1 }, 600, function() { /*animation completed*/ });
$('.home-register').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$('#sub-nav').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$('.gallery-subs').css({display:"none",overflow:"visible",position:"relative"},800);
$('.gallery-subs').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
$("#link_hillcrest, #link_3little, #link_early, #link_contact, #link_ii_by_iv, #link_rockport, #link_raw").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
});
/*Position unselected squares*/
$('.two').stop().animate({ width: '90', height: '126', left: '160', top: '180', opacity: 1}, 600, function() { /*animation completed*/ });
$('.three').stop().animate({ width: '70', height: '70', left: '50', top: '320', opacity: 1}, 600, function() { /*animation completed*/ });
$('.four').stop().animate({ width: '80', height: '80', left: '129', top: '350', opacity: 1}, 600, function() { /*animation completed*/ });
/*Select active square*/
$('.square').removeClass('active');
$(this).addClass('active');
} else if ( $(this).hasClass('two') ) {
$('.details h1').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
$('.details .article').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
$('.one').stop().animate({ width: '80', height: '120', left: '13', top: '180', opacity: 1}, 600, function() { /*animation completed*/ });
$('.two').stop().animate({ width: '224', height: '290', left: '232', top: '34', opacity: 1}, 600, function() {
/*load content*/;
$('.details h1').html(' ');
$('.details .article').load('inc/the-nest2.php');
$('.details h1').animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
$('.details .article').animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
$('.content').animate({ width: '403', opacity: 1 }, 7000, function() { /*animation completed*/ });
$('.home-register').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$('#sub-nav').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$('.gallery-subs').css({display:"block",overflow:"visible",position:"relative"},800);
$('.gallery-subs').animate({ opacity: 1 }, 700, function() { /*animation completed*/ });
$("#link_hillcrest").css({color:"#153d53",fontWeight:"400"},100);
$("#link_nest, #link_3little, #link_early, #link_contact, #link_ii_by_iv, #link_rockport, #link_raw").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
});
$('.three').stop().animate({ width: '144', height: '83', left: '50', top: '320', opacity: 1}, 600, function() { /*animation completed*/ });
$('.four').stop().animate({ width: '120', height: '83', left: '100', top: '185', opacity: 1}, 600, function() { /*animation completed*/ });
$('.square').removeClass('active');
$(this).addClass('active');
} else {
alert('nothing');
}
});
});
/* below, the same animations but when clicking on the side nav */
$(document).ready(function(){
$('.main-nav,.reg3,.privacy_policy,.subnav').on('click', '.main', function(event) {
$("#testit").removeClass("main_page");
if ( $(this).hasClass('aa') ) {
location.reload();
$('.details h1').animate({ opacity: 0 }, 600, function() { $('.details h1').html(' '); });
$('.details .article').animate({ opacity: 0 }, 600, function() { $('.details .article').unload(); });
$('.one').stop().animate({ width: '135', height: '207', left: '648', top: '190', opacity: 1}, 600, function() { /*animation completed*/ });
$('.two').stop().animate({ width: '154', height: '208', left: '485', top: '125', opacity: 1}, 600, function() { /*animation completed*/ });
$('.three').stop().animate({ width: '245', height: '145', left: '231', top: '170', opacity: 1}, 600, function() { /*animation completed*/ });
$('.four').stop().animate({ width: '190', height: '139', left: '413', top: '340', opacity: 1}, 600, function() { /*animation completed*/ });
$('.home-register').animate({ opacity: 1 }, 920, function() { /*animation completed*/ });
$('.square').removeClass('active');
$('#sub-nav').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$('.gallery-subs').css({display:"none",overflow:"visible",position:"relative"},800);
$('.gallery-subs').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
} else if ( $(this).hasClass('ee') ) {
/*hide the currently visible stuff*/
$('.details h1').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
$('.details .article').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
$(".reg1").animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
$(".reg2").animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
$(".reg3").animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
/*Animate squares positions*/
$('.one').stop().animate({ width: '227', height: '320', left: '260', top: '26', opacity: 1}, 600, function() {
/*load content*/;
$('.details h1').html(' ');
$('.details .article').load('inc/the-nest.php');
$('.details h1').animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
$('.details .article').animate({ width: '400',left: '260', opacity: 1 }, 600, function() { /*animation completed*/ });
$('.home-register').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$('#sub-nav').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$('.gallery-subs').css({display:"none",overflow:"visible",position:"relative"},800);
$('.gallery-subs').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
$("#link_hillcrest, #link_3little, #link_early, #link_contact, #link_ii_by_iv, #link_rockport, #link_raw").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
});
/*Position unselected squares*/
$('.two').stop().animate({ width: '90', height: '126', left: '160', top: '180', opacity: 1}, 600, function() { /*animation completed*/ });
$('.three').stop().animate({ width: '70', height: '70', left: '50', top: '320', opacity: 1}, 600, function() { /*animation completed*/ });
$('.four').stop().animate({ width: '80', height: '80', left: '129', top: '350', opacity: 1}, 600, function() { /*animation completed*/ });
/*Select active square*/
$('.square').removeClass('active');
$(this).addClass('active');
} else if ( $(this).hasClass('bb') ) {
$('.details h1').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
$('.details .article').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
$('.one').stop().animate({ width: '80', height: '120', left: '13', top: '180', opacity: 1}, 600, function() { /*animation completed*/ });
$('.two').stop().animate({ width: '224', height: '290', left: '232', top: '34', opacity: 1}, 600, function() {
/*load content*/;
$('.details h1').html(' ');
$('.details .article').load('inc/the-nest2.php');
$('.details h1').animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
$('.details .article').animate({ width: '400',left: '260', opacity: 1 }, 600, function() { /*animation completed*/ });
$('.content').animate({ width: '403', opacity: 1 }, 7000, function() { /*animation completed*/ });
$('.home-register').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$('#sub-nav').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
$('.gallery-subs').css({display:"block",overflow:"visible",position:"relative"},800);
$('.gallery-subs').animate({ opacity: 1 }, 700, function() { /*animation completed*/ });
$("#link_hillcrest").css({color:"#153d53",fontWeight:"400"},100);
$("#link_nest, #link_3little, #link_early, #link_contact, #link_ii_by_iv, #link_rockport, #link_raw").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
});
$('.three').stop().animate({ width: '144', height: '83', left: '50', top: '320', opacity: 1}, 600, function() { /*animation completed*/ });
$('.four').stop().animate({ width: '120', height: '83', left: '100', top: '185', opacity: 1}, 600, function() { /*animation completed*/ });
$('.square').removeClass('active');
$(this).addClass('active');
} else {
alert('nothing');
}
});
});