Team:SYSU-China/js/animate.js

From 2014.igem.org

(Difference between revisions)

Latest revision as of 18:38, 16 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 rotateGear() { var angle = 0; setInterval(function(){ $(".wheel").each(function() {

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

}); }, 50); }

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

});

/

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 animatefun() { think(); machinefun(); stroll(); rotateGear(); fire(); sweat(); footer(); }

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

animatefun(); }

function headstyle() { $($(".firstHeading")[0]).hide(); $("#top-section").hide(); $("#headdiv").hover(function() { $("#top-section").show(); },function() {

}).trigger("mousehover");

$("#top-section").hover(function() {

},function() { $("#top-section").hide(); }).trigger("mousehover"); } ini();

});

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

@@ Line 149: / Line 149: @@
 	}
-	function fire() {
+	var firepath = ["https://static.igem.org/mediawiki/2014/4/4d/Fire1.png",
+	"https://static.igem.org/mediawiki/2014/1/13/Fire2.png",
+	"https://static.igem.org/mediawiki/2014/a/ae/Fire3.png",
+	"https://static.igem.org/mediawiki/2014/3/36/Fire4.png"];
+		function fire() {
 		var firelist = [];
 		var index = 0;
@@ Line 155: / Line 159: @@
 		var fires = $(".fire");
 		var speed = 150;
-		for (var i = 1; i <= 4; i++) {
+		for (var i = 0; i < 4; i++) {
-			firelist.push("images/fire" + i + ".png");
+			firelist.push(firepath[i]);
 		}
 		setInterval(function() {
@@ Line 295: / Line 299: @@
 		animatefun();
-headstyle();
 	}
 	function headstyle() {
 		$($(".firstHeading")[0]).hide();
 		$("#top-section").hide();
-		$(this).hover(function() {
+		$("#headdiv").hover(function() {
-			$("#top-section").addClass("headingshow");
+			$("#top-section").show();
+		},function() {
+		}).trigger("mousehover");
+		$("#top-section").hover(function() {
 		},function() {
-			$("#top-section").removeClass("headingshow").addClass("headinghide");
+			$("#top-section").hide();
 		}).trigger("mousehover");
 	}