Html + jQuery vs Silverlight: part 1. Basic animations

Currently I’m assigned to small ASP.NET MVC project and I have some time left to make it a bit fancy so I took a dive into jQuery.  This is my first experience with jQuery and so far I like it. 

What I will be trying to do in the next couple of blog posts is post a comparison between Silverlight and jQuery + Html.  The reason I’m doing this is to show to Silverlight developers that it isn’t all that hard to do the animation stuff that you are able to do in Silverlight in jQuery. 

This blogpost isn’t a tutorial on how to use jQuery (I’m still learning it myself) nor is it another blogpost about how much better html5 is than Silverlight. I’m writing this to encourage Silverlight developers to try out other web technologies and expand their horizon on how things can be done. 

Today I’m covering some basic animations like the ‘fading in/out’ and the ‘hover over’ an Image.  

I’ll start with Silverlight:

At first we’ll create our Image:

<Image x:Name="image" Source=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccKHSGE0Q0uSpUXCKsOlaBp9TgKl3Vk6HQJOHpPD65qY1Uo4GC5vXp60GdlZdcv6m4ORDg-J3mRnH6HOFAjKNdNdqDcLbK0SShyLqRr6LtobN0IVcjD-tfS8yvsHiCoArWxgjQgFQFgQX/s220/Me.png/>

Then we create 2 states for this image.  One state will have its opacity set to 100% and one will have opacity set to 0%.  They will respectively be called Begin and End:

<VisualStateManager.VisualStateGroups>

       <VisualStateGroup x:Name="FadeIn">

             <VisualStateGroup.Transitions>

                    <VisualTransition GeneratedDuration="0:0:1"/>

                    <VisualTransition From="Begin" GeneratedDuration="0:0:1" To="End"/>

             </VisualStateGroup.Transitions>

             <VisualState x:Name="Begin">

                    <Storyboard>

                          <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image" d:IsOptimized="True"/>

                    </Storyboard>

             </VisualState>

             <VisualState x:Name="End"/>

       </VisualStateGroup>

</VisualStateManager.VisualStateGroups>

Then the only thing we need to do next is create 2 go to state actions that will hook onto the MouseEnter and MouseLeave event.  

<Image x:Name="image" Source="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccKHSGE0Q0uSpUXCKsOlaBp9TgKl3Vk6HQJOHpPD65qY1Uo4GC5vXp60GdlZdcv6m4ORDg-J3mRnH6HOFAjKNdNdqDcLbK0SShyLqRr6LtobN0IVcjD-tfS8yvsHiCoArWxgjQgFQFgQX/s220/Me.png">

       <i:Interaction.Triggers>

             <i:EventTrigger EventName="MouseEnter">

                    <ei:GoToStateAction StateName="End"/>

             </i:EventTrigger>

             <i:EventTrigger EventName="MouseLeave">

                    <ei:GoToStateAction StateName="Begin"/>

             </i:EventTrigger>

       </i:Interaction.Triggers>

</Image>

So that’s it for Silverlight.  Pretty easy I always thought… until I did the same in jQuery:

So again we create our image:

<img id="awsomeDudeImage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccKHSGE0Q0uSpUXCKsOlaBp9TgKl3Vk6HQJOHpPD65qY1Uo4GC5vXp60GdlZdcv6m4ORDg-J3mRnH6HOFAjKNdNdqDcLbK0SShyLqRr6LtobN0IVcjD-tfS8yvsHiCoArWxgjQgFQFgQX/s220/Me.png" alt="Gorgeous" />

Then instead of a storyboard we create some jQuery that will do the animations:

$("#awsomeDudeImage").hover(function () {

                $("#awsomeDudeImage").animate({ opacity: 1 });

            }, function () {

                $("#awsomeDudeImage").animate({ opacity: 0 });

            });

A small notice here is that I use the animate method instead of the FadeIn and Fadeout methods of jQuery.  The reason I do this is because the FadeOut method will collapse my image element, but I don’t want it to be completely collapsed.  Also it is easier to compare the Silverlight and jQuery methods this way because essentially they do exactly the same thing, which is animating the opacity of an Image.

What is a bit annoying about Silverlight is though most of the XAML is typesafe, when you set the target name wrong then the storyboard will only throw an error at runtime.  That a javascript library can’t do this is perfectly normal, but a compiled .NET language should be able to check this at compilation time in my opinion.

It’s obvious in this example that Silverlight carries allot more overhead while basically we are doing the same thing, granted on a whole different platform. The result however is exactly the same for the user.  It’s a browser opening a page in which there is an image that will fadein when hovering over with your mouse.  Though the syntax is much more verbose, the way Silverlight handles this animation offers allot more room for advanced animations. 

Next time we’ll see how they compare up to each other on some more advanced animations.

I uploaded the example on my skydrive.
You can watch both results in the examples section.