I'm a bit new with javascript/jquery. I've taken over a page design with images and links that animate on rollovers. I've almost got things working, but there's one last glitch. The mouseover effects of an image growing/shrinking work fine when the page is first loaded. But if the user clicks on a link, a secondary animation fires, and an embedded page is loaded. If they click to return to the "main page" the original growing/shrinking rollover animation no longer fires. I'm positive it's because the page has already passed the onload, but I don't know how to fix this. Here's a stripped down version of my jquer:
$(document).ready(function(){
/* now the image animations */
var $width_one = $("#sq1").width();
var $height_two = $("#sq2").height();
var $height_three = $("#sq3").height();
var $width_three = $("#sq3").width()
var $width_four = $("#sq4").width();
var $height_four = $("#sq4").height();
/* this following is the portion that will no longer work after they've clicked on things */
$(".square.one,#link_nest").mouseenter(function(){
if ($(".the-nest")[0]){
$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
}
else{
$(".square.one").filter(':not(:animated)').animate({width:"150px"},200);
$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
$("#square_caption1").css('visibility','visible');
}
});
$(".square.one,#link_nest").mouseleave(function(){
if ($(".the-nest")[0]){
$("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
}
else{
$(".square.one").filter(':not(:animated)').animate({width:$width_one},200);
$("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
$("#square_caption1").css('visibility','hidden');
}
});
/* several other, like this. This ends the section that won't run. */
/* now starts the onclick animation. After this runs, and they click on the link that repositions the page back to the "home page" the above animation no longer fires */
$('.square-container').on('click', '.square', function(event) {
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/page1.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*/ });
});
/*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');
} /*again, several other rollovers,then … */
else {
alert('nothing');
}
});
});
