Question

我无法停止动画...如果我翻转一个链接以显示一个框5次并且脱落......“显示”效果发生了5次......因为我离开它我只想要它展示一次......

基本上它似乎陷入了循环......

如何停止多个实例？

jQuery(document).ready(function(){
    jQuery('.ttip').hover(
        function() {
            var offset = jQuery(this).offset();
            console.log(offset)
            var width = jQuery(this).outerWidth();
            var tooltipId = jQuery(this).attr("rel");
            jQuery('#tooltip-container').empty().load('tooltips.html' + tooltipId).fadeIn(500);
            jQuery('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();
        },
        function() {
          jQuery('#tooltip-container').fadeOut(500);
        });
});

Answer 1

您应该使用stop(true)。

请参阅http://api.jquery.com/stop

Answer 2

正如Stefan所说使用你的代码强制动画以停止（true）跳转到结尾，如下例所示：

@(Html.Kendo().Grid(Model).HtmlAttributes(new { })
          .Name("grid")
          .Pageable(x => x.Enabled(true))
          .Scrollable(x => x.Enabled(true))
          .Sortable(x => x.Enabled(true))
          .Filterable(x => x.Enabled(true))
          .HtmlAttributes(new { style = "height:430px;" })
          .Columns(columns =>
          {
              columns.Bound(p => p.LangTitle).Title(Html.DisplayNameFor(x => x.LangTitle).ToString()).Width(130);
              columns.Bound(p => p.LangCountry).Title(Html.DisplayNameFor(x => x.LangCountry).ToString()).Width(130);
              columns.Bound(p => p.LangEncode).Title(Html.DisplayNameFor(x => x.LangEncode).ToString()).Width(130);
              columns.Template(x => @Html.ActionLink("Edit", "Edit", new { id = @x.LangId }));
          })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(15)
        .Read(read => read.Action("Products_Read", "Grid"))
        )
        .Resizable(resize => resize.Columns(true))
    )

jQuery：停止在多个翻转上重复动画？

2 个答案: