Team:KAIST-Korea/js/photoglimmer

From 2011.igem.org

(Difference between revisions)
Line 31: Line 31:
}
}
-
function RestartImages(event)
+
function RestartImages()
{
{
     $("#photo1").css("opacity","0");
     $("#photo1").css("opacity","0");
-
     $("#photo1").animate({"opacity":1},1500, "linear", null);
+
     $("#photo1").animate({"opacity":1},1000, "linear", null);
     $("#photo2").css("opacity","0");
     $("#photo2").css("opacity","0");
-
     $("#photo2").animate({"opacity":1},1500, "linear", null);
+
     $("#photo2").animate({"opacity":1},1000, "linear", null);
     $("#photo3").css("opacity","0");
     $("#photo3").css("opacity","0");
-
     $("#photo3").animate({"opacity":1},1500, "linear", null);
+
     $("#photo3").animate({"opacity":1},1000, "linear", null);
     $("#photo4").css("opacity","0");
     $("#photo4").css("opacity","0");
-
     $("#photo4").animate({"opacity":1},1500, "linear", null);
+
     $("#photo4").animate({"opacity":1},1000, "linear", null);
     $("#photo5").css("opacity","0");
     $("#photo5").css("opacity","0");
-
     $("#photo5").animate({"opacity":1},1500, "linear", null);
+
     $("#photo5").animate({"opacity":1},1000, "linear", null);
}
}

Revision as of 18:24, 11 August 2011

//Microsoft.Glimmer.OneWay //<AnimationCollection FilePath="D:\IGEM\iGEM_Wiki\Test_photo.html.glimmer.js" xmlns="clr-namespace:GlimmerLib;assembly=GlimmerLib"><Animation Name="opacity_step" EventType="load" Trigger="body"><Animation.Targets><Target Name="#photo1" Duration="1000" Easing="linear" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo2" Duration="3000" Easing="swing" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo3" Duration="4500" Easing="linear" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo4" Duration="1500" Easing="swing" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo5" Duration="3000" Easing="linear" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="RemoveImages" EventType="click" Trigger="#button"><Animation.Targets><Target Name="#photo1" Duration="1000" Easing="linear" Callback="RestartImages"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="1" To="0" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo2" Duration="1000" Easing="linear" Callback="RestartImages"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="1" To="0" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo3" Duration="1000" Easing="linear" Callback="RestartImages"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="1" To="0" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo4" Duration="1000" Easing="linear" Callback="RestartImages"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="1" To="0" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo5" Duration="1000" Easing="linear" Callback="RestartImages"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="1" To="0" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="RestartImages" EventType="[none]" Trigger="#button"><Animation.Targets><Target Name="#photo1" Duration="1500" Easing="linear" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo2" Duration="1500" Easing="linear" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo3" Duration="1500" Easing="linear" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo4" Duration="1500" Easing="linear" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#photo5" Duration="1500" Easing="linear" Callback="null"><Target.Effects><OpacityEffect CSSName="opacity" DisplayName="Opacity Animation" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation></AnimationCollection> jQuery(function($) { var timer; function opacity_step(event) { 

    $("#photo1").css("opacity","0");
   $("#photo1").animate({"opacity":1},1000, "linear", null);
    $("#photo2").css("opacity","0");
   $("#photo2").animate({"opacity":1},1000, "swing", null);
    $("#photo3").css("opacity","0");
   $("#photo3").animate({"opacity":1},1000, "linear", null);
    $("#photo4").css("opacity","0");
   $("#photo4").animate({"opacity":1},1000, "swing", null);
    $("#photo5").css("opacity","0");
   $("#photo5").animate({"opacity":1},1000, "linear", null);

}

function RemoveImages(event) { 

    $("#photo1").css("opacity","1");
   $("#photo1").animate({"opacity":0},1000, "linear", RestartImages);
    $("#photo2").css("opacity","1");
   $("#photo2").animate({"opacity":0},1000, "linear", RestartImages);
    $("#photo3").css("opacity","1");
   $("#photo3").animate({"opacity":0},1000, "linear", RestartImages);
    $("#photo4").css("opacity","1");
   $("#photo4").animate({"opacity":0},1000, "linear", RestartImages);
    $("#photo5").css("opacity","1");
   $("#photo5").animate({"opacity":0},1000, "linear", RestartImages);

}

function RestartImages() { 

    $("#photo1").css("opacity","0");
   $("#photo1").animate({"opacity":1},1000, "linear", null);
    $("#photo2").css("opacity","0");
   $("#photo2").animate({"opacity":1},1000, "linear", null);
    $("#photo3").css("opacity","0");
   $("#photo3").animate({"opacity":1},1000, "linear", null);
    $("#photo4").css("opacity","0");
   $("#photo4").animate({"opacity":1},1000, "linear", null);
    $("#photo5").css("opacity","0");
   $("#photo5").animate({"opacity":1},1000, "linear", null);

}

opacity_step();

$('#button').bind('click', RemoveImages);


});

Retrieved from "http://2011.igem.org/Team:KAIST-Korea/js/photoglimmer"