Team:University College London/js/frontslide
From 2012.igem.org
(Difference between revisions)
(36 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
var inTransition = false; | var inTransition = false; | ||
function transition(newSlide){ | function transition(newSlide){ | ||
- | if(inTransition == false){ | + | if((newSlide != currentSlide) && (inTransition == false)){ |
inTransition = true; | inTransition = true; | ||
- | $('#slide'+currentSlide).animate({left:'-990px'},1000,"easeInOutCubic"); | + | $('#bottle'+(newSlide-1)).unbind('mouseenter').unbind('mouseout').animate({opacity:1},1); |
- | $('#slide'+newSlide).animate({left:'0px'},1000,"easeInOutCubic",function(){ currentSlide = newSlide; inTransition = false; }); | + | $('#bottle'+(currentSlide-1)).animate({opacity:0.4},1).mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}); |
+ | if(newSlide > currentSlide){ | ||
+ | $('#slide'+newSlide).animate({left:'990px'},1).animate({left:'0px'},1000,"easeInOutCubic"); | ||
+ | $('#slide'+currentSlide).animate({left:'0px'},5).animate({left:'-990px'},1000,"easeInOutCubic",function(){ currentSlide = newSlide; inTransition = false; }); | ||
+ | |||
+ | } else { | ||
+ | $('#slide'+newSlide).animate({left:'-990px'},1).animate({left:'0px'},1000,"easeInOutCubic"); | ||
+ | $('#slide'+currentSlide).animate({left:'0px'},5).animate({left:'+990px'},1000,"easeInOutCubic",function(){ currentSlide = newSlide; inTransition = false; }); | ||
+ | } | ||
+ | |||
} | } | ||
} | } | ||
Line 18: | Line 27: | ||
} | } | ||
} | } | ||
+ | |||
+ | // bottle setup | ||
+ | $('#bottle0').click(function(){transition(1);}); | ||
+ | $('#bottle1').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(2);}); | ||
+ | $('#bottle2').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(3);}); | ||
+ | $('#bottle3').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(4);}); | ||
// Slide 1 setup | // Slide 1 setup | ||
Line 27: | Line 42: | ||
$('#label2').hover(function(){pinHop(2);}); | $('#label2').hover(function(){pinHop(2);}); | ||
$('#pin2').hover(function(){pinHop(2);}); | $('#pin2').hover(function(){pinHop(2);}); | ||
+ | $('#label2').click(function(){transition(3);}); | ||
+ | $('#pin2').click(function(){transition(3);}); | ||
$('#label3').hover(function(){pinHop(3);}); | $('#label3').hover(function(){pinHop(3);}); | ||
$('#pin3').hover(function(){pinHop(3);}); | $('#pin3').hover(function(){pinHop(3);}); | ||
+ | $('#label3').click(function(){$('#mapopen').fadeIn(300);}); | ||
+ | $('#mapopen').mouseout(function(){$('#mapopen').fadeOut(300);}); | ||
$('#label4').hover(function(){pinHop(4);}); | $('#label4').hover(function(){pinHop(4);}); | ||
$('#pin4').hover(function(){pinHop(4);}); | $('#pin4').hover(function(){pinHop(4);}); | ||
+ | $('#label4').click(function(){transition(4);}); | ||
+ | $('#pin4').click(function(){transition(4);}); | ||
+ | |||
$('#label5').hover(function(){pinHop(5);}); | $('#label5').hover(function(){pinHop(5);}); | ||
$('#pin5').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);}); | ||
+ | $('#s2back').mouseenter(function(){$('#s2back').animate({opacity:1},100);}).mouseout(function(){$('#s2back').animate({opacity:0.7},100);}); | ||
+ | $('#s2back').click(function(){$('#s2back').animate({opacity:0.7},100); transition(1);}); | ||
+ | |||
+ | //Slide 3 setup | ||
+ | $('#s3back').mouseenter(function(){$('#s3back').animate({opacity:1},100);}).mouseout(function(){$('#s3back').animate({opacity:0.7},100);}); | ||
+ | $('#s3back').click(function(){$('#s3back').animate({opacity:0.7},100); transition(1);}); | ||
+ | $('#course1').mouseenter(function(){$('#line1').show();}).mouseout(function(){$('#line1').hide();}); | ||
+ | $('#course2').mouseenter(function(){$('#line2').show();}).mouseout(function(){$('#line2').hide();}); | ||
+ | $('#course3').mouseenter(function(){$('#line3').show();}).mouseout(function(){$('#line3').hide();}); | ||
+ | $('#course4').mouseenter(function(){$('#line4').show();}).mouseout(function(){$('#line4').hide();}); | ||
+ | $('#course5').mouseenter(function(){$('#line5').show();}).mouseout(function(){$('#line5').hide();}); | ||
+ | $('#course6').mouseenter(function(){$('#line6').show();}).mouseout(function(){$('#line6').hide();}); | ||
+ | $('#course7').mouseenter(function(){$('#line7').show();}).mouseout(function(){$('#line7').hide();}); | ||
+ | $('#course11').mouseenter(function(){$('#line1').show();}).mouseout(function(){$('#line1').hide();}); | ||
+ | $('#course22').mouseenter(function(){$('#line2').show();}).mouseout(function(){$('#line2').hide();}); | ||
+ | $('#course33').mouseenter(function(){$('#line3').show();}).mouseout(function(){$('#line3').hide();}); | ||
+ | $('#course44').mouseenter(function(){$('#line4').show();}).mouseout(function(){$('#line4').hide();}); | ||
+ | $('#course55').mouseenter(function(){$('#line5').show();}).mouseout(function(){$('#line5').hide();}); | ||
+ | $('#course66').mouseenter(function(){$('#line6').show();}).mouseout(function(){$('#line6').hide();}); | ||
+ | $('#course77').mouseenter(function(){$('#line7').show();}).mouseout(function(){$('#line7').hide();}); | ||
+ | |||
+ | //slide4 setup | ||
+ | $('#s4back').mouseenter(function(){$('#s4back').animate({opacity:1},100);}).mouseout(function(){$('#s4back').animate({opacity:0.7},100);}); | ||
+ | $('#s4back').click(function(){$('#s4back').animate({opacity:0.7},100); transition(1);}); | ||
+ | $('#hover').mouseenter(function(){$('#tools').show();}).mouseout(function(){$('#tools').hide();}); | ||
+ | |||
+ | |||
+ | |||
}); | }); |
Latest revision as of 09:14, 10 September 2012
$(document).ready(function(){
var currentSlide = 1; var inTransition = false; function transition(newSlide){ if((newSlide != currentSlide) && (inTransition == false)){ inTransition = true; $('#bottle'+(newSlide-1)).unbind('mouseenter').unbind('mouseout').animate({opacity:1},1); $('#bottle'+(currentSlide-1)).animate({opacity:0.4},1).mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}); if(newSlide > currentSlide){ $('#slide'+newSlide).animate({left:'990px'},1).animate({left:'0px'},1000,"easeInOutCubic"); $('#slide'+currentSlide).animate({left:'0px'},5).animate({left:'-990px'},1000,"easeInOutCubic",function(){ currentSlide = newSlide; inTransition = false; });
} else { $('#slide'+newSlide).animate({left:'-990px'},1).animate({left:'0px'},1000,"easeInOutCubic"); $('#slide'+currentSlide).animate({left:'0px'},5).animate({left:'+990px'},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 $('#bottle0').click(function(){transition(1);}); $('#bottle1').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(2);}); $('#bottle2').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(3);}); $('#bottle3').mouseenter(function(){$(this).animate({opacity:0.9},50);}).mouseout(function(){$(this).animate({opacity:0.4},50);}).click(function(){transition(4);});
// 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);}); $('#label2').click(function(){transition(3);}); $('#pin2').click(function(){transition(3);});
$('#label3').hover(function(){pinHop(3);}); $('#pin3').hover(function(){pinHop(3);}); $('#label3').click(function(){$('#mapopen').fadeIn(300);}); $('#mapopen').mouseout(function(){$('#mapopen').fadeOut(300);});
$('#label4').hover(function(){pinHop(4);}); $('#pin4').hover(function(){pinHop(4);}); $('#label4').click(function(){transition(4);}); $('#pin4').click(function(){transition(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);}); $('#s2back').mouseenter(function(){$('#s2back').animate({opacity:1},100);}).mouseout(function(){$('#s2back').animate({opacity:0.7},100);}); $('#s2back').click(function(){$('#s2back').animate({opacity:0.7},100); transition(1);});
//Slide 3 setup $('#s3back').mouseenter(function(){$('#s3back').animate({opacity:1},100);}).mouseout(function(){$('#s3back').animate({opacity:0.7},100);}); $('#s3back').click(function(){$('#s3back').animate({opacity:0.7},100); transition(1);}); $('#course1').mouseenter(function(){$('#line1').show();}).mouseout(function(){$('#line1').hide();}); $('#course2').mouseenter(function(){$('#line2').show();}).mouseout(function(){$('#line2').hide();}); $('#course3').mouseenter(function(){$('#line3').show();}).mouseout(function(){$('#line3').hide();}); $('#course4').mouseenter(function(){$('#line4').show();}).mouseout(function(){$('#line4').hide();}); $('#course5').mouseenter(function(){$('#line5').show();}).mouseout(function(){$('#line5').hide();}); $('#course6').mouseenter(function(){$('#line6').show();}).mouseout(function(){$('#line6').hide();}); $('#course7').mouseenter(function(){$('#line7').show();}).mouseout(function(){$('#line7').hide();}); $('#course11').mouseenter(function(){$('#line1').show();}).mouseout(function(){$('#line1').hide();}); $('#course22').mouseenter(function(){$('#line2').show();}).mouseout(function(){$('#line2').hide();}); $('#course33').mouseenter(function(){$('#line3').show();}).mouseout(function(){$('#line3').hide();}); $('#course44').mouseenter(function(){$('#line4').show();}).mouseout(function(){$('#line4').hide();}); $('#course55').mouseenter(function(){$('#line5').show();}).mouseout(function(){$('#line5').hide();}); $('#course66').mouseenter(function(){$('#line6').show();}).mouseout(function(){$('#line6').hide();}); $('#course77').mouseenter(function(){$('#line7').show();}).mouseout(function(){$('#line7').hide();}); //slide4 setup $('#s4back').mouseenter(function(){$('#s4back').animate({opacity:1},100);}).mouseout(function(){$('#s4back').animate({opacity:0.7},100);}); $('#s4back').click(function(){$('#s4back').animate({opacity:0.7},100); transition(1);}); $('#hover').mouseenter(function(){$('#tools').show();}).mouseout(function(){$('#tools').hide();});
});