Search jQuery

jQuery Forum

Getting Started

xandeq

How to change opacity on images in a table on mouseover ?

in Getting Started • 9 years ago

When i mouseover my table, it happens that the entire table, changes opacity and other animation effects,

instead of just 1 image at a time as i was planning. Can you help ?

My jquery code:

$(document).ready(function () {
$('.mosaico img').mouseover(function () {
$('.mosaico img').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function () {
// Animation complete.
});
});
});

My Table:

<table class="mosaico" style="display: inline-table;" border="0" cellpadding="0"

cellspacing="0" width="920">

<tr>

<td>

<td>

<td>

<td>

<td>

</tr>

<tr>

<td>

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/ImoveisContemplados.aspx"><img name="image2_r1_c1" src="img/mosaico/image2_r1_c1.jpg" width="230" height="147" id="image2_r1_c1" alt="" /></asp:HyperLink>

</td>

<td>

<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/VeiculosContemplados.aspx"><img name="image2_r1_c2" src="img/mosaico/image2_r1_c2.jpg" width="230" height="147" id="image2_r1_c2" alt="" /></asp:HyperLink>

</td>

<td>

<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/CaminhoesContemplados.aspx"><img name="image2_r1_c3" src="img/mosaico/image2_r1_c3.jpg" width="223" height="147" id="image2_r1_c3" alt="" /></asp:HyperLink>

</td>

<td>

<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/MotosContemplados.aspx"><img name="image2_r1_c4" src="img/mosaico/image2_r1_c4.jpg" width="237" height="147" id="image2_r1_c4" alt="" /></asp:HyperLink>

</td>

<td>

</tr>

</table>

Thanks in advance.