Team:SYSU-China/js/animate.js

From 2014.igem.org

Revision as of 15:46, 10 October 2014

$(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', '3rdPage'], sectionsColor: ['#6daba1', '#da664a', '#f8ce44'], navigation: true, navigationPosition: 'right', navigationTooltips: ['First page', 'Second page', 'Third and last page'] });

var machine = $(".bg2 img");// var button = $(".button"); var speed = 100;

function button1click() { $(button[0]).unbind("click"); // click enent $(machine[1]).hide();// stage1 $(this).hide(); // on button $(button[0]).show(); $(machine[2]).show();// stage2 // show in $($(".in1")[0]).fadeIn(10 * speed); // move in window.setTimeout(function() { $($(".in1")[0]).switchClass("in1", "in2", 20 * speed, "easeOutExpo"); } , 10 * speed);

// hide in window.setTimeout(function() { $($(".in2")[0]).fadeOut(10 * speed); } , 31 * speed); // show machine3-light window.setTimeout(function() { var topH = $(machine[2]).offset().top; var leftH = $(machine[2]).offset().left; //$(machine[3]).css({"position" : "absolute", "top" : topH + "px", "left" : leftH -50 + "px"}); $(machine[3]).fadeIn(20 * speed); }, 40 * speed); // show out1 batman window.setTimeout(function() { $($(".batman1")[0]).fadeIn(10 * speed); } , 60 * speed); // move batman window.setTimeout(function() { $($(".batman1")[0]).switchClass( "batman1", "batman2", 20 * speed, "easeOutExpo"); } , 70 * speed); // show out2 superman window.setTimeout(function() { $($(".superman1")).fadeIn(10 * speed); } , 90 * speed); // move out2 superman window.setTimeout(function() { $($(".superman1")[0]).switchClass("superman1", "superman2", 20 * speed, "easeOutExpo"); } , 100 * speed); window.setTimeout(function() { $(button[0]).click(button0click); }, 120 * speed); }

function button0click() { $(button[1]).unbind("click"); // click enent $($(".batman2")[0]).hide(); $($(".superman2")[0]).hide(); $(machine[3]).hide(); // stage2 $(machine[2]).hide(); // stage2 $(this).hide(); // off button $(machine[1]).show(); // stage1 $(button[1]).show();

$($(".in2")[0]).removeClass("in2").addClass("in1"); // --Input CSS 1 $($(".batman2")[0]).removeClass("batman2").addClass("batman1"); $($(".superman2")[0]).removeClass("superman2").addClass("superman1"); $(button[1]).click(button1click); }

function machinefun() {

//$(".bg2").each(function(i)) button.each(function(i) { if (i == 1) {//on button

$(this).hover(function() { // pass animate },function() { // leave animate }).trigger("mousehover");

$(this).click(button1click); } else if (i == 0) { // off button

$(this).hover(function() { // pass animate },function() { // leave animate }).trigger("mousehover");

$(this).click(button0click); } }); }

function stroll() { $(".stroll").each(function(i) { if (i == 0) { $(this).click(function() { location.href="#secondPage"; }); $("#arr1").click(function() { location.href="#secondPage"; }); $(this).hover(function() { $("#arr1").show(); if ($("#arr1").hasClass("down2")) $("#arr1").removeClass("down2").addClass("down1"); $("#arr1").switchClass("down1", "down2", 1000); },function() { //$("#arr1").show();// leave animate }).trigger("mousehover"); } else if (i == 1) { $(this).click(function() { location.href="#3rdPage"; }); $("#arr2").click(function() { location.href="#3rdPage"; }); $(this).hover(function() { $("#arr2").show(); if ($("#arr2").hasClass("down2")) $("#arr2").removeClass("down2").addClass("down1"); $("#arr2").switchClass("down1", "down2", 1000); }, function() { $("#arr2").show();// leave animate }).trigger("mousehover"); } }); }

function rotateGear() { var angle = 0; setInterval(function(){ $(".wheel").each(function() {

   			angle += 5;
   			$(this).rotate(angle);				

}); }, 50); }

function fire() { var firelist = []; var index = 0; var index2 = 0; var fires = $(".fire"); var speed = 150; for (var i = 1; i <= 4; i++) { firelist.push("images/fire" + i + ".png"); } setInterval(function() { index += 1; index %= 4; $(fires[0]).attr("src", firelist[index]); //alert(firelist[index]); }, speed); }

function sweat() { setInterval(function() { $("#lefttear").show(); $("#righttear").show();

$("#lefttear").animate({ width : "15px", left : "60px", top : "35px" }, 1500); $("#righttear").animate({ width : "16px", left : "240px", top : "35px" }, 1500); $("#lefttear").fadeOut(500); $("#righttear").fadeOut(500); setTimeout(function() { $("#lefttear").css({ width: "1px", left: "94px", top: "55px" }); $("#righttear").css({ width: "1px", left: "223px", top: "55px" }); }, 2000); }, 3000); }

/*

$("#go").click(function(){

 $("#block").animate({ 
   width: "90%",
   height: "100%", 
   fontSize: "10em", 
   borderWidth: 10
 }, 1000 );

});

• /

function think() { var think = $(".think"); var i = 0; setInterval(function() { if (i < 4) { $(think[i]).fadeIn(1000); i++; } else if (i < 6) { i++; setTimeout(function() { //do nothing }, 1000); } else { i = 0; think.each(function(i) { $(this).fadeOut(1000); }); } },1020); }

jQuery.fn.extend({ replaceAnimate: function (newClass, movetime) { var oldClass = this.attr("class"); //alert(movetime); this.animateToClass(newClass, movetime).removeClass(oldClass).addClass(newClass); } });

function setStyle() { //set the position of machine button var machine = $(".bg2 img"); $(machine[2]).hide(); $(machine[3]).hide(); $($(".in1")[0]).hide(); $($(".batman1")[0]).hide(); $($(".superman1")[0]).hide(); $("#lefttear").hide(); $("#righttear").hide();

$(".think").each(function() { //$(this).hide(); });

}

function footer() { $("#footer").hover(function() { $(this).switchClass("fooback", "foo", 200, "easeOutExpo"); /* $(this).animate({ height: "200px !important", lineHeight: "25px !important", padding: "80px 0 0 0 !important" }, 100); */ }, function() { $(this).switchClass("foo", "fooback", 100); /*$(this).animate({ height: "55px !important", lineHeight: "17px !important", padding: "10px 0 0 0 !important" });*/ }).trigger("mousehover"); }

function animatefun() { think(); machinefun(); stroll(); rotateGear(); fire(); sweat(); footer(); }

function ini() { setStyle(); stroll();

animatefun(); }

ini();

});

//$("body").click(function(evt) {alert(evt.pageX + " " + evt.pageY)});