Javascript 使用JQuery向我的图像添加动画

这是我的主页：

<%@ 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>

" />
" />
" />
" />
" />
" />
显示计算器|
显示计算器-β|
管理定价触发因素|
创建定价表|
投资组合分析
管理
$（文档）.ready（函数（）{
$（'#btnIc'）.live（'click'，function（）{
window.location.href=“”；
});
$（'#btnIcOld'）.live（'click'，function（）{
window.location.href=https://extranetint/swap';
});
$（'#btnPricing'）.live（'click'，函数（）{
//window.location.href=“”；
});
$（'#btnSheets'）.live（'click'，函数（）{
//window.location.href=“”；
});
$（'#btnPort'）.live（'click'，function（）{
//window.location.href=“”；
});
$（'btnAdmin'）.live（'click'，函数（）{
//window.location.href=“”；
});
});

我如何使用JQuery（或者其他任何东西）在我的图像上实现鼠标悬停的效果，当你将鼠标悬停在图像上时，图像会有一点增长？我尝试使用jqueryanimate，但由于某些原因，我无法让它工作

---

谢谢

查看使用增长效果的功能。

我实际上认为您的主要问题是使用

.btnIc

而不是

#btnIc

。此外，您的目标是

td

，而不是其中的

img

。下面是一个使用

div

s而不是

td

和

img

的工作示例：

如果你想让它在你的代码上工作，你应该在javascript代码中将

$（'#btnIc.img'）

更改为

$（'#btnIc img'）

---

（编辑）另外，如果你想使用

top

和

left

的话，请确保你在

td

和

img

上设置了正确的

位置：relative

和

位置：absolute

，这里有一个教程，完全符合你的要求-基本上与你的jsfiddle粘贴一样。干杯

只需在图像中添加一个

class=“btnIc”

属性，jQuery示例就可以了。

如果您不太关心Internet Explorer，只需使用一点CSS3即可

#homeView img {
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
    -ms-transition: -ms-transform 0.3s;
    transition: transform 0.3s;
}
#homeView img:hover {
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

当用户悬停图像时，图像将被放大。适用于当前版本的Chrome、Safari、Opera和即将推出的Firefox4。在Firefox 3.5和3.6中，您将看到放大效果，只是没有过渡

---

演示：

您可以将悬停事件绑定到页面中的所有img标记或仅绑定所需的标记，并使用2个函数设置鼠标输入和鼠标输出的大小动画

$(function(){
    $('img').hover(function(){
        $(this).animate({
            height: '110%',
            width: '110%',
        });
    },
    function(){
        $(this).animate({
            height: '100%',
            width: '100%',
        });
    });
});

---

你能发布你的jquery代码吗？（最好是在这样我们就可以修补它）我尝试使用这个没有结果-我想在我实际拥有的代码上工作的东西。如果我必须重构代码，那么我将在以后承担这项任务。我想知道是否有任何方法可以将它应用到我在表格中设置菜单的特定方式中。我喜欢这个解决方案，它非常性感。我对代码进行了实质性的重新格式化，以便它可以正确地显示为代码。请仅使用空格缩进代码行，并将所有行缩进至少四个空格，以便将其识别为代码块。您可能希望扩展这个答案，并解释它正在做什么以及如何使用代码。感谢您将尝试按照说明进行操作