jquery fadein fadeout in table?

Question

JavaScript

Code:

<code>
<script>
$(function() {
$('.jq').hover(function(event) {

var last = $(this).attr('id');
$('#'+ last).fadeOut('0');
$('#last_'+last).stop().fadeIn('0');

},
function(event) {

var last = $(this).attr('id ');
last = last.substring(5);

$('#last_'+last).fadeOut('0');
$('#'+last).fadeIn('0');
}

);}) ;


</script>

<habracut />
<div id="tarif">
<div class="tarif-header">
<p>Unlimited tariffs<
<p class="desc">Unlimited plans are ideal for those who work intensively on the Internet.
Download music and movies in high quality. Watch online broadcasts. Communicate with your family and friends. </p>

<div style="width:990px; height:70px;">
<div class="jqlast act hidden" style="position:absolute;width:990px;" id="last_1">
<table width="100%" border="0">
<tr>

<td align="center" width="230px"><strong>Unlimited 2.1M</strong></td>
<td width="220px"><p style="font-size:11px;"><strong>Connection fee - <span style="color:#da2020;

">0</span></strong> RUB</p> <span style="line-height:12px; font-size:11px;">Connection speed by
LAN - <strong>100</strong> Mbps</span></td>
<td width="295px">
<p style="font-size:11px;"><strong>Network access speed Internet:</strong>
from 09:00 to 02:00 - to <strong>2.1</strong> Mbps
from 02:00 to 04:00 - to <strong>4.2</strong> Mbps
from 04 :00 to 09:00 - up to <strong>8.4</strong> Mbps</p>
</td>
<td><a href="/"><img src="img/button-con.png " /></a></td>

</tr>
</table>
</div>
<div id='1' class="jq" style="position:absolute;width:990px;">
<table width="100%" border="0" >
<tr>
<td align="center" ><strong>Unlimited 4M</strong></td>
<td><span class="big"><strong>999</strong></span> <span class="small">rub/month</span></td>
<td class="small"> up to <span class="big"><strong>4</strong></span> Mbps</td>
<td align="center"> </td>
</tr>
</table></ div>
</div>
<!-- -->

<div style="width:990px; height:70px;">
<div class="jqlast act hidden" style="position:absolute;width:990px;" id="last_2">
<table width="100%" border="0" height="50">
<tr>


<span style="line-height:12px; font-size:11px;">
LAN connection speed - <strong>100</strong> Mbps</span></td>
<td width="295px ">
<p style="font-size:11px;"><strong>Internet access speed:</strong>
from 09:00 to 02:00 to <strong>2.1</strong> Mbps
from 02:00 to 04:00 to <strong>4.2</strong> Mbps
04:00 to 09:00 to <strong>8.4</strong> Mbps</p>
</td>
< td><a href="/"><img src="img/button-con.png" /></a></td>
</tr>
</table>
</div>
<div id='2' class="jq" style="position:absolute;width:990px;">
<table width="100%" border="0" height="50" >
<tr>
<td align="center" ><strong>Unlimited 4M</strong></td>
<td><span class="big"><strong>999</strong></span> <span class ="small">rub/month</span></td>
<td class="small">up to <span class="big"><strong>4</strong></span> Mbps</span> td>
<td align="center"> </td>
</tr>
</table></div>
</div></code>
When you move the mouse quickly, all rows change. Is there a possibility to solve this problem?

Answer 1

What is the actual problem?
If out does not work, then it is necessary to forcibly close the neighbors.
If you need to “blunt” the reaction, then set a short timer and then check the state and only then animate.