Jqueryダイアログエフェクト、アニメーションキューを停止

Question

私はホバー上にスライド機能を追加しました。マウスオーバー時にはダイアログ（スライド）を閉じます。何度もホバリングを続けてマウスポインタを動かすと、スライドは非常にゆっくり動き、ダイアログは滑り続けます。どのようにそれを防ぐためにどのようなアイデア？

また、次のコードに「Modal：True」を追加するとします。全体的なことは機能しません。任意のソリューション??

<script type="text/javascript"> 
    $(document).ready(function() { 


     $('.image').each(function() { 
      var panel = $(this).siblings('.descPanel'); 
      $(this).mouseover(function() { 
       panel.dialog('open'); 
      }); 

      $(this).mouseout(function() { 
       panel.dialog('close'); 
      }); 
     }); 

     $(".descPanel").dialog({ autoOpen: false,show:slide,hide:slide, 
      open: function() { 
       $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error"); 
      } 
     }); 

</script> 

HTML Strcuture：

<form id="form1" runat="server"> 
<div> 
    <table> 
     <tr id="tr"> 
      <td></td> 
      <td></td> 
      <td> 
       <asp:Image runat="server" ImageUrl="~/Jquery/Untitled.jpg" CssClass="image" /> 
       <asp:Panel runat="server" ID="mypanel" CssClass="descPanel"> 
        <asp:Label runat="server" ID="mylabel" CssClass="label" Text="hello"></asp:Label> 
       </asp:Panel> 
      </td> 
     </tr> 
    </table> 
    <table> 
     <tr id="tr"> 
      <td></td> 
      <td></td> 
      <td> 
       <asp:Image ID="Image1" runat="server" ImageUrl="~/Jquery/Untitled.jpg" CssClass="image" /> 
       <asp:Panel runat="server" ID="Panel1" CssClass="descPanel"> 
        <asp:Label runat="server" ID="Label1" CssClass="label" Text="hello1111"></asp:Label> 
       </asp:Panel> 
      </td> 
     </tr> 
    </table> 
</div> 
</form> 

おかげで、 クナル

Answer 1

あなたはdestroyにcloseを変更することができます。

$(this).mouseout(function() { 
    panel.dialog('destroy'); 
});