Jquery dialog effect, stop animation queue
I have added slide functionality on hover and on mouseout i close the dialog ( slide). If i repeatedly keep hovering and move the mouse pointer the slide works very slowly and the dialog keeps sliding. Any idea how to prevent that??
Also if i add "Modal:True" to the below code. The whole thing doesnt even work. Any solutions??
<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,
开发者_StackOverflow中文版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>
Thanks, Kunal
You can change close
to destroy
:
$(this).mouseout(function() {
panel.dialog('destroy');
});
精彩评论