meiner Bilder mit JQuery

Question

Hier ist meine Homepage Hinzufügen von Animation:

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

Wie kann ich mit JQuery (oder wirklich alles), ein Mouseover-Effekt auf meine Bilder erreichen, wo sie ein wenig wachsen wie du über sie schwebst? Ich habe versucht, JQuery animate zu verwenden, aber aus irgendeinem Grund konnte ich es nicht zum Laufen bringen.

Danke!

Answer 1

Sie können ein Hover-Ereignis für all img-Tags in Ihrer Seite binden oder nur diejenigen, die erforderlich ist, und 2-Funktionen verwenden, um die Größe für mousein zu animieren und mouseOut

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

Answer 2

Überprüfen Sie this site, die einen wachsenden Effekt verwendet.

Answer 3

Ich glaube eigentlich, Ihr Hauptproblem war mit .btnIc anstelle von #btnIc. Sie zielen auch auf die td anstelle der img drin. Hier ist ein funktionierendes Beispiel mit div s anstelle ein td und ein img: http://jsfiddle.net/zyKde/

Wenn Sie es in Ihrem Code zu arbeiten, Sie $('#btnIc .img') zu $('#btnIc img') im JavaScript-Code ändern sollten.

(Edit) auch, stellen Sie sicher, dass Sie die richtige position: relative und position: absolute auf td und img gesetzt, wenn Sie top und left verwenden möchten.

Answer 4

Es gibt ein Tutorial für genau das, was Sie wollen here - funktioniert ziemlich genau so wie Ihre jsfiddle einfügen. Prost!

Answer 5

Fügen Sie einfach ein class="btnIc" Attribut zu Ihren Bildern hinzu und Ihr jQuery Beispiel funktioniert.

Answer 6

Wenn Ihnen der Internet Explorer nicht wirklich wichtig ist, können Sie einfach ein wenig CSS3 verwenden.

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

Wenn der Benutzer das Bild schwebt, wird das Bild in gezoomt wird. Kompatibel mit der aktuellen Version von Chrome, Safari, Opera und dem kommenden Firefox 4. In Firefox 3.5 und 3.6 Sie den Zoom-in sehen Effekt, nur ohne die Übergänge.

Demo: http://jsfiddle.net/thai/WNmdh/1/