Question

早上好

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
       $(function () {

    $(".mark").bind("mouseover", function () {
        var DivId = $(this).attr("href");
        $('.icontent').hide();
        $(DivId).fadeIn(300);
    });
    $(".mark").bind("mouseout", function () {
        $('.icontent').hide();
        $("#defaultdiv").fadeIn(300);
    });
});

    </script>


<style>


ul {



    padding:0px 0px 0px 30px;

}

ul > li {

    color: #dc3fb0;

}

ul > li > span {

    color: #58595b;

}

.title {

    font-family:Verdana, Geneva, sans-serif;

    font-size: 18px;

    color: #58595b;

    border-bottom: solid 2px #666666;

    padding-left: 15px;

    padding-top:5px;

}

#Contenair {

    border: solid 2px #666666;

    height:246px;

    width:500px;

}

icontent {
    width: 454px;
    height: 246px;


    }

a {
    text-decoration: none;
    }


</style>


</head>

<body bgcolor="#e3e3e3">
<div style="height:490px; width:454px;">
<table style="background-color: #FFF;" width="454" height="460" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="background-image:url(public-finance-bg.jpg); background-repeat: no-repeat; background-position-x: 4px;
background-position-y: 20px; font-family:Verdana, Geneva, sans-serif; font-size: 17px; color: #58595b; height: 300px;">
            <div class="icontent" id="defaultdiv">
                 <div style="padding-top: 10px;
height: 70px; padding-left: 9px;">Network Rail ordered to pay back 
£53m over late trains</div>
                <img src="train.jpg" width="454" height="246" />
            </div>
            <div class="icontent" style="display: none" id="cont1">
                 <div style="padding-top: 10px;
height: 70px; padding-left: 9px;">Public Finance random news</div>
                <img src="plane.jpg" width="454" height="246" />
            </div>
            <div class="icontent"  style="display: none" id="cont2">
                 <div style="padding-top: 10px;
height: 70px; padding-left: 9px;">Better Care Fund cash 'could finance hospitals</div>
                <img src="bus.jpg" width="454" height="246" />
            </div>

             <div class="icontent"  style="display: none" id="cont3">
                 <div style="padding-top: 10px;
height: 70px; padding-left: 9px;">Ministers sign 'single pot' growth deals</div>
                <img src="car.jpg" width="454" height="246" />
            </div>

        </td>
    </tr>
    <tr style="height: 27px;">
        <td style="font-family:Verdana, Geneva, sans-serif; font-size: 18px; color: #58595b; border-bottom: solid 2px #666666; padding-left: 15px; padding-top: 12px;">Latest News</td>
    </tr>


    <tr style="height: 35px;">
        <td height="22" valign="top" style="font-family:Verdana, Geneva, sans-serif; font-size: 11px; color: #58595b;">
           <ul>
<li><a href="#cont1" class="mark" id="mark1"><span style="color: #666;">Better Care Fund cash could finance hospitals</span></a>
                </li>
            </ul>
        </td>
    </tr>
     <tr style="height: 35px;">
        <td height="22" valign="top" style="font-family:Verdana, Geneva, sans-serif; font-size: 11px; color: #58595b;">
           <ul>
                <li><a href="#cont2" class="mark" id="mark2"><span style="color: #666;">Better Care Fund cash could finance hospitals</span></a>
                </li>
            </ul>
        </td>
    </tr>

    <tr style="height: 35px;">
        <td valign="top" style="font-family:Verdana, Geneva, sans-serif; font-size: 11px; color: #58595b;">
            <ul>
                <li> <a href="#cont3" class="mark" id="mark3"><span style="color: #666;">Better Care Fund cash could finance hospitals</span></a>
                </li>
            </ul>
        </td>
    </tr>

</table>


</div>

</body>
</html>

我有一个鼠标悬停在同一个框中显示不同的div内容。

工作但是 - 尝试很快地将鼠标悬停在所有链接上，您将看到会发生什么。多个div开始出现并且卡住了。

有什么办法让它冷静下来？

Answer 1

Demo

stop(true)

试试这个。它不会导致子句多个动画。

Answer 2

您可以尝试以下代码：

Working Demo

$(function () {
   $('.icontent').hide();
   $('.icontent').eq(0).show();
   $(".mark").bind("mouseover", function () {
    var DivId = $(this).attr("href");
    $('.icontent').hide();
    $(DivId).stop().fadeIn(300);
   });
   $(".mark").bind("mouseout", function () {
    $('.icontent').hide();
    $("#defaultdiv").fadeIn(300);
   });
 });

当鼠标悬停在多个链接上时，jquery鼠标悬停使得DIV变得疯狂

2 个答案: