Team:University College London/js/frontslide

From 2012.igem.org

Revision as of 16:45, 4 August 2012

$(document).ready(function(){

    var currentSlide = 1;
    var inTransition = false;
    function transition(newSlide){
           if(inTransition == false){
                 $('#bottle'+(newSlide-1)).off('mouseenter');
                 inTransition = true;
                 $('#slide'+currentSlide).animate({left:'-990px'},1000,"easeInOutCubic");
                 $('#slide'+newSlide).animate({left:'0px'},1000,"easeInOutCubic",function(){ currentSlide = newSlide; inTransition = false; });
           }
    }

     function pinHop(pin){
              if($('#pin'+pin).hasClass('animating') == false){
                  $('#pin'+pin).addClass('animating').animate({top:'-=15px'},200,function(){$('#pin'+pin).animate({top:'+=15px'},200,function(){$('#pin'+pin).removeClass('animating');});});
                  }
            if($('#pin'+pin+'shadow').hasClass('animating') == false){
                  $('#pin'+pin+'shadow').addClass('animating').animate({left:'+=12px',top:'-=12px'},200,function(){$('#pin'+pin+'shadow').animate({left:'-=12px',top:'+=12px'},200,function(){$('#pin'+pin+'shadow').removeClass('animating');});});
                  }
             }

     // bottle setup
     $('#bottle1').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(2);});

     // Slide 1 setup
     $('#label1').hover(function(){pinHop(1);});
     $('#pin1').hover(function(){pinHop(1);});
     $('#label1').click(function(){transition(2);});
     $('#pin1').click(function(){transition(2);});

     $('#label2').hover(function(){pinHop(2);});
     $('#pin2').hover(function(){pinHop(2);});

     $('#label3').hover(function(){pinHop(3);});
     $('#pin3').hover(function(){pinHop(3);});

     $('#label4').hover(function(){pinHop(4);});
     $('#pin4').hover(function(){pinHop(4);});

     $('#label5').hover(function(){pinHop(5);});
     $('#pin5').hover(function(){pinHop(5);});

     // Slide 2 setup
     $('#zoom1').mouseenter(function(){$('#popup1').show();}).mouseout(function(){$('#popup1').fadeOut(150);});
     $('#zoom2').mouseenter(function(){$('#popup2').show();}).mouseout(function(){$('#popup2').fadeOut(150);});
     $('#zoom3').mouseenter(function(){$('#popup3').show();}).mouseout(function(){$('#popup3').fadeOut(150);});

      });