Team:SYSU-China/js/animate.js

From 2014.igem.org

(Difference between revisions)
(Created page with "$(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', '3rdPage'], sectionsColor: ['#6daba1', '#da664a', '#f8ce44'], navigation: tru...")
Line 8: Line 8:
});
});
-
function setStyle() {
+
var machine = $(".bg2 img");//
-
$(".line img :odd").each(function(i) {
+
var button = $(".button");
-
$(this).css({'width' : '20%', 'z-index' : '0'});
+
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);
 +
}
});
});
-
$(".line img :even").each(function(i) {
+
}
-
if (i == 0)
+
 
-
return;
+
function stroll() {
-
$(this).css({'margin-left' : '-20px', 'margin-right' : '-20px', 'margin-bottom': '20px', 'z-index' : '1000'});
+
$(".stroll").each(function(i) {
-
+
if (i == 0) {
 +
$(this).click(function() {
 +
location.href="#secondPage";
 +
});
 +
$(this).hover(function() {
 +
$("#arr1").switchClass("down1", "down2", 20 * speed);
 +
setTimeout(function() {
 +
$("#arr1").removeClass("down2").addClass("down1");
 +
$("#arr1").hide();
 +
}, 20 * speed + 10);
 +
},function() {
 +
$("#arr1").show();// leave animate
 +
}).trigger("mousehover");
 +
} else if (i == 1) {
 +
$(this).click(function() {
 +
location.href="#3rdPage";
 +
});
 +
$(this).hover(function() {
 +
$("#arr2").switchClass("down1", "down2", 20 * speed);
 +
setTimeout(function() {
 +
$("#arr2").removeClass("down2").addClass("down1");
 +
}, 20 * speed + 10);
 +
}, function() {
 +
$("#arr2").show();// leave animate
 +
}).trigger("mousehover");
 +
}
});
});
}
}
-
//setStyle();
+
 
 +
 
 +
 +
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();
 +
}
 +
 
 +
function ini() {
 +
setStyle();
 +
footer();
 +
animatefun();
 +
}
 +
 
 +
 +
 
 +
 
 +
 
 +
 
 +
ini();
 +
 
});
});
 +
 +
 +
//$("body").click(function(evt) {alert(evt.pageX + " " + evt.pageY)});

Revision as of 06:13, 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"; }); $(this).hover(function() { $("#arr1").switchClass("down1", "down2", 20 * speed); setTimeout(function() { $("#arr1").removeClass("down2").addClass("down1"); $("#arr1").hide(); }, 20 * speed + 10); },function() { $("#arr1").show();// leave animate }).trigger("mousehover"); } else if (i == 1) { $(this).click(function() { location.href="#3rdPage"; }); $(this).hover(function() { $("#arr2").switchClass("down1", "down2", 20 * speed); setTimeout(function() { $("#arr2").removeClass("down2").addClass("down1"); }, 20 * speed + 10); }, 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(); }

function ini() { setStyle(); footer(); animatefun(); }




ini();

});


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

Retrieved from "http://2014.igem.org/Team:SYSU-China/js/animate.js"