Adding animation to my images with JQuery
- by slandau
Here is my home page:
<%@ Page Language="C#" MasterPageFile="~/Views/Home/Home.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="IndicationContentPlaceHolder" runat="server">
<table id="home" style="margin-left: auto; margin-right:auto;">
<td id="homeLinks">
<div style="padding-left:35px;" id="homeListing" class="containerMid">
<div id="homeView">
<table style="margin-left: auto; margin-right:auto;">
<tr>
<tr>
<td id="btnIcOld" style="text-align:center;cursor:pointer;">
<img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Load.png")%>" />
</td>
<td id="btnIc" style="text-align:center;cursor:pointer;">
<img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Bar_Chart.png")%>" />
</td>
<td id="btnPricing" style="text-align:center;cursor:pointer;">
<img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Pie_Chart_disabled.png")%>" />
</td>
<td id="btnSheets" style="text-align:center;cursor:pointer;">
<img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Line_Chart_disabled.png")%>" />
</td>
<td id="btnPort" style="text-align:center;cursor:pointer;">
<img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Modify_disabled.png")%>" />
</td>
<td id="btnAdmin" style="text-align:center;cursor:pointer;">
<img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/Profile_disabled.png")%>" />
</td>
</tr>
<tr>
<td id="Td1">
<b>Indications Calculator | </b>
</td>
<td id="lblIc">
<b>Indications Calculator - Beta | </b>
</td>
<td id="lblPricing">
<b>Managing Pricing Triggers | </b>
</td>
<td id="lblSheets">
<b>Creating Pricing Sheets | </b>
</td>
<td id="lblPort">
<b>Portfolio Analysis | </b>
</td>
<td id="lblAdmin">
<b>Administration</b>
</td>
</tr>
</tr>
</table>
</div>
</div>
</td>
</table>
<div id="pageMessage"></div>
<script>
$(document).ready(function () {
$('#btnIc').live('click', function () {
window.location.href = "<%=Url.Action("Indications") %>";
});
$('#btnIcOld').live('click', function () {
window.location.href = 'https://extranetint/swap';
});
$('#btnPricing').live('click', function () {
//window.location.href = "<%=Url.Action("Triggers") %>";
});
$('#btnSheets').live('click', function () {
//window.location.href = "<%=Url.Action("Sheets") %>";
});
$('#btnPort').live('click', function () {
//window.location.href = "<%=Url.Action("Analysis") %>";
});
$('#btnAdmin').live('click', function () {
//window.location.href = "<%=Url.Action("Admin") %>";
});
});
</script>
</asp:Content>
How can I, with JQuery (or really anything), achieve a mouse-over effect on my images where they will grow a little bit as you hover over them? I tried using JQuery animate but for some reason I couldn't get it to work.
Thanks!
