はここで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のアニメーションを使ってみましたが、何らかの理由でそれを動作させることができませんでした。

ありがとうございます！

Answer 1

あなたはすべてのあなたのページ内のimgタグや必要とされるものだけにホバーイベントをバインドしmouseinのサイズをアニメーション化する2つの機能を使用して

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

Answer 2

拡大効果を利用するthis siteをご覧ください。

Answer 3

実際にあなたの主な問題は.btnIcの代わりに#btnIcを使用していたと思います。また、imgの代わりにtdをターゲティングしています。ここでは代わりにtdとimgのdiv sの作業例です：http://jsfiddle.net/zyKde/

あなたはそれがあなたのコードで作業する場合は、JavaScriptコードで$('#btnIc img')に$('#btnIc .img')を変更する必要があります。

（編集）も、あなたがtopとleftを使用したい場合は、あなたのtdとimgの正しいposition: relativeとposition: absoluteを設定してください。

Answer 4

正確に何のためのチュートリアルがありますかhere - あなたのjsfiddleペーストと同じように動作します。乾杯！

Answer 5

画像にclass="btnIc"という属性を追加するだけで、jQueryの例が機能します。

Answer 6

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); 
} 

ユーザーが画像を置い

は、画像をズームアップされます。Firefoxの3.5と3.6ではクロム、サファリ、オペラと今後のFirefox 4の現在のバージョンで動作しますが、ズーム・イン表示されます効果、ちょうど移行なし。

デモ：http://jsfiddle.net/thai/WNmdh/1/