How To Display Slider Or Animation Content In Asp.net Mvc Template

ASP.NET jQuery Cookbook

Over 60 practical recipes for integrating jQuery with ASP.NET

Introduction

Some useful inbuilt functions in jQuery that nosotros will explore in this commodity for achieving animation effects are:

breathing ( properties, [ elapsing ], [ easing ], [ complete ] ):
This method allows u.s. to create custom animation effects on any numeric css property. The parameters supported by this method are:
- properties: This is the map of css properties to animate, for e.g. width, height, fontSize, borderWidth, opacity, etc.
- duration: This is the duration of the animation in milliseconds. The constants deadening and fast tin can exist used to specify the durations, and they stand for 600 ms and 200 ms respectively.
- easing: This is the easing function to use. Easing indicates the speed of the animation at different points during the blitheness. jQuery provides inbuilt swing and linear easing functions. Various plugins tin can be interfaced if other easing functions are required.
- complete: This indicates the callback role on completion of the blitheness.
fadeIn ( [ duration ], [ callback ] ):
This method animates the opacity of the matched elements from 0 to i i.e. transparent to opaque. The parameters accepted are:
- duration: This is the elapsing of the animation
- callback: This is the callback office on completion of the animation
fadeOut( [ elapsing ], [ callback ] ):
This method animates the opacity of the matched elements from i to 0 i.east. opaque to transparent. The parameters accepted are:
- duration: This is the duration of the animation
- callback: This is the callback function on completion of the animation
slideUp( [ duration ], [ callback ] ):
This method animates the height of the matched elements with an upwardly sliding movement. When the height of the element reaches 0, the css holding display of the element is updated to none so that the element is hidden on the folio. The parameters accepted are:
- duration: This is the duration of the animation
- callback: This is the callback function on completion of the animation
slideDown( [ duration ], [ callback ] ):
This method animates the height of the matched elements from 0 to the specified maximum pinnacle. Thus, the chemical element appears to slide down on the page. The parameters accepted are:
- duration: This is the duration of the blitheness
- callback: This is the callback function on completion of the animation
slideToggle( [ duration ], [ callback ] ):
This method animates the peak of the matched elements. If the element is initially hidden, it volition slide down and become completely visible. If the chemical element is initially visible, information technology will slide up and get hidden on the page. The parameters accustomed are:
- duration: This is the duration of the animation
- callback: This is the callback function on completion of the animation
jQuery.fx.off:
If there is a need to disable animations considering of a resource constraint or due to difficulties in viewing the animations, so this utility can be used to turn off the blitheness completely. This is achieved by setting all animated controls to their last state.
terminate ( [ clearQueue ], [ jumpToEnd ] ):
This method stops the currently running animations on the page. The parameters accustomed are:
- clearQueue: This indicates whether any queued upwards animations are required to be cleared. The default value is imitation.
- jumpToEnd: This indicates if the current animation is to be cleared immediately. The default value is faux.

In this article, we will cover some of the animation effects that can exist achieved in ASP.NET using the capabilities of jQuery.

Getting started

Let's start by creating a new ASP.Internet website in Visual Studio and name it Chapter5.
Salvage the jQuery library in a script binder js in the project.
To enable jQuery on any web form, drag-and-driblet to add the following to the page:
```
<scriptsrc="js/jquery-1.4.1.js" blazon="text/javascript"></script>
```

Now allow'southward move on to the recipes where we will run across dissimilar animation techniques using jQuery.

Enlarging text on hover

In this recipe, we will animate the font size of text content on hover.

Getting ready

Add together a new spider web form Recipe1.aspx to the current project.
Create a Css class for the text content that nosotros desire to animate. The font size specified in the css Class is the original font size of the text before blitheness is applied to it:
```
              .enlarge  {  font-size:12.5px;  font-family:Arial,sans-serif;  }            
```

Add an ASP.NET Label control on the form and set its Css Class to the preceding style:

<asp:LabelCssClass="enlarge"runat="server">Lorem ipsum dolor sit ...............</asp:Label>

Thus, the ASPX markup of the form is as follows:

          <form id="form1" runat="server">  <div align="center">  Mouseover to enlarge text:<br />  <fieldset id="content" style="width:500px;meridian:300px;">  <asp:LabelCssClass="enlarge" runat="server">Lorem ipsum dolor  sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</  asp:Label>  </fieldset>  </div>  </grade>

Thus, initially, the page will display the Label command as follows:

ASP.NET jQuery Cookbook

We will now animate the font size of the Label on hover on the containing fieldset element.

How to do it…

In the certificate.set() office of the jQuery script block, retrieve the original font size of the Label:
```
var origFontSize = parseFloat($(".overstate").css('font-size'));
```
The parseFloat() office takes in an input string and returns the start floating point value in the string. It discards whatsoever content later on the floating signal value. For example, if the css property returns 12.5 px, so the role will discard the px.
Ascertain the hover event of the containing fieldset element:
```
$("#content").hover(
```
In the mouseenter event handler of the hover method, update the cursor style to pointer:
```
role() { $(".enlarge").css("cursor", "pointer");
```
Calculate the maximum font size that we want to breathing to. In this instance, we volition set the maximum size to thrice the original:
```
var newFontSize = origFontSize * iii;
```

Animate the fontSize css property of the Label in 300 ms:

$(".overstate").animate({ fontSize: newFontSize }, 300); },

In the mouseleave result handler of the hover method, animate the fontSize to the original value in 300 ms as shown:

              function() {  $(".enlarge").animate({ fontSize: origFontSize }, 300);  }  );

Thus, the complete jQuery solution is as follows:

          <script linguistic communication="javascript" type="text/javascript">  $(document).gear up(function() {  var origFontSize = parseFloat($(".enlarge").css('fontsize'));  $("#content").hover(  part() {  $(".enlarge").css("cursor", "pointer");  var newFontSize = origFontSize * 3;  $(".enlarge").animate({ fontSize: newFontSize }, 300);  },  function() {  $(".enlarge").breathing({ fontSize: origFontSize },  300);  }  );  });  </script>

How it works…

Run the web form. Mouseover on the fieldset area. The text size will animate over the stated duration and alter to the maximum specified font size every bit displayed in the following screenshot:

ASP.NET jQuery Cookbook

On removing the mouse from the fieldset area, the text size will return back to the original.

Creating a fade upshot on hover

In this recipe, we will create a fade issue on an ASP.Internet Epitome control on hover. We will use the fadeIn and fadeOut methods to achieve the same.

Getting ready

Add a new web form Recipe2.aspx to the current project.

Add an image control to the form:

<asp:Prototype src="images/Image1.jpg" ID="Image1" runat="server" />

Define the properties of the image in the css:

              #Image1  {  width:438px;  tiptop:336px;  }

Thus, the complete ASPX markup of the web class is every bit follows:

              <form id="form1" runat="server">  <div align="middle">  Mouseover on the image to view fade effect:  <fieldset id="content" style="width:480px;height:370px;">  <br />  <asp:Image src="images/Image1.jpg" ID="Image1" runat="server" />  </fieldset>  </div>  </class>

On page load, the paradigm is displayed as follows:

We will now create a fade effect on the image on hover on the containing fieldset area.

How to practice information technology…

In the document.ready() function of the jQuery script block, define the hover event on the containing fieldset area:
```
$("#content").hover(
```

In the mouseenter event handler of the hover method, update the cursor to pointer:

              function() {  $("#Image1").css("cursor", "arrow");

Apply the fadeOut method on the Paradigm control with an animation duration of grand ms:
```
              $("#Image1").fadeOut(1000);  },            
```
In the mouseleave consequence handler of the hover method, utilize the fadeIn method on the Image control with an animation duration of 1000 ms:
```
              role() {  $("#Image1").fadeIn(1000);  }  );            
```

Thus, the complete jQuery solution is equally follows:

          <script language="javascript" type="text/javascript">  $(certificate).gear up(function() {  $("#content").hover(  part() {  $("#Image1").css("cursor", "pointer");  $("#Image1").fadeOut(1000);  },  function() {  $("#Image1").fadeIn(one thousand);  }  );  });  </script>

How it works…

Run the web folio. Mouseover on the Image command on the web page. The paradigm will slowly fade away as shown in the following screenshot:

ASP.NET jQuery Cookbook

On mouseout from the containing fieldset area, the epitome reappears.

Sliding elements on a page

In this recipe, we will use the slideUp and slideDown methods for achieving sliding effects on an ASP.Cyberspace panel.

Getting set

Add a new web form Recipe3.aspx in the current project.

Add an ASP.NET console to the page as follows:

              <asp:Panel class="slide" runat="server">  Sliding Panel  </asp:Console>

The css class for the console is defined as follows:

              .slide  {  font-size:12px;  font-family unit:Arial,sans-serif;  display:none;  tiptop:100px;  background-color:#9999FF;  }

Add a push button command to trigger the sliding outcome on the panel:
```
<asp:Button ID="btnSubmit" runat="server" Text="Trigger Slide" />
```

Thus, the complete ASPX markup of the web course is as follows:

              <form id="form1" runat="server"> <div align="center"> <fieldset fashion="width:400px;peak:150px;"> <asp:Button ID="btnSubmit" runat="server" Text="Trigger Slide" /> <br /><br/> <asp:Panel course="slide" runat="server">            Sliding Panel </asp:Panel> </fieldset> </div> </course>

On page load, the folio appears as shown in the post-obit screenshot:

ASP.NET jQuery Cookbook

Nosotros will now use jQuery to slide up and slide downwards the panel.

How to do information technology…

In the certificate.ready() function of the jQuery script cake, define the click event of the push button control:
```
$("#btnSubmit").click(function(e) {
```
Foreclose default class submission:
```
eastward.preventDefault();
```
Bank check if the ASP.NET panel control is hidden:
```
if ($(".slide").is(":hidden"))
```
The jQuery selector :hidden selects matched elements that are hidden on the page.
If yes, then slide down the console until its height reaches the maximum (100 px) divers in the css property.
```
$(".slide").slideDown("slow");
```
If the panel is initially visible then slide up so that its meridian slowly reduces until it becomes 0 and the panel disappears from the page:
else
```
              $(".slide").slideUp("slow");  });            
```

Thus, the complete jQuery solution is as follows:

          <script language="javascript" blazon="text/javascript">  $(document).set(function() {  $("#btnSubmit").click(office(due east) {  e.preventDefault();  if ($(".slide").is(":hidden"))  $(".slide").slideDown("slow");  else  $(".slide").slideUp("tedious");  });  });  </script>