Добавление анимации к моим изображениям с помощью JQuery

Question

Вот моя домашняя страница:

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

Как с помощью JQuery (или чего-то еще) добиться эффекта наведения мыши на мои изображения, когда они будут немного расти при наведении курсораих?Я пытался использовать JQuery animate, но по какой-то причине не смог заставить его работать.

Спасибо!

Answer 1

Если вас не интересует 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 и предстоящим Firefox 4. В Firefox 3.5 и 3.6 вы увидите эффект увеличения, просто без переходы.

Демо: http://jsfiddle.net/thai/WNmdh/1/

Answer 2

Вы можете привязать событие наведения ко всем тегам img на вашей странице или только к тем, которые требуются, и использовать 2 функции для анимации размера mousein и mouseout

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

Answer 3

Просто добавьте атрибут class="btnIc" к вашим изображениям, и ваш пример jQuery будет работать.

Answer 4

Здесь есть учебник для того, что вы хотите здесь - в значительной степени работает так же, как ваша паста jsfiddle. Ура!

Answer 5

Я на самом деле думаю, что ваша основная проблема была в использовании .btnIc вместо #btnIc. Кроме того, вы нацеливаетесь на td вместо img внутри него. Вот рабочий пример с div s вместо td и img: http://jsfiddle.net/zyKde/

Если вы хотите, чтобы он работал в вашем коде, вы должны изменить $('#btnIc .img') на $('#btnIc img') в коде javascript.

(Изменить) также убедитесь, что вы установили правильные position: relative и position: absolute на td и img, если хотите использовать top и left.

Answer 6

Проверьте этот сайт , который использует растущий эффект.