0

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');
        }       

    });
});
3
Contributors
7
Replies
26
Views
4 Years
Discussion Span
Last Post by turpentyne
0

tuperntyne, you forgot to add the jQuery reference is the left panel. That's why it didn't work.

I updated it for you, check: http://jsfiddle.net/Z4hZh/2/

I tested the animations and it all seemns to work, verify if theres any problem there please.

0

strange... The animations are working in jsfiddle. Yet not so on my own location. that's a bummer. :(

0

Try replacing

$(".square.one,#link_nest").mouseenter(function(){

with

$(document).on(".square.one,#link_nest", 'mouseenter', function(){
0

actually, I ended up reworking the entire animation and... hah! Now I have the exact opposite problem. hahah! I don't want the mouseovers to work while the user is in the 'sub pages'. ack!

I'm trying to do it with a simple div class , but for some reason it's not switching the class name:

$(document).ready(function(){

/* here I wanted to use a div class to dictate whether this animation runs. By default, page loads with it at 'main_page' */
if ($("#testit").hasClass('main_page')) {


/* now the image animations */


var $width_one = $("#sq1").width();
var $height_one = $("#sq1").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();
    });
});

} else if ( $(this).hasClass('sub_page') ) { /* do nothing */

};


/* end image animations */

/* start showing,hiding */


    $('.square-container').on('click', '.square', function(event) {

/* Here, I'm trying to remove the class - i know it should probably be an 'if' statement. I'm just testing the idea */

    $('#testit').removeClass('main_page');

/* now on to the rest of the actions when clicked */

    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');
            /* this animation takes them back to the beginning, so I want to switch div back again */
            $('#testit').addClass('main_page');

        } else if ( $(this).hasClass('one') ) {

    /* in here, I don't want those first animations to run */

            /*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 {       
            alert('nothing');
        }       

    });
});
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.