Question

在我的页面中，我进行了以下ajax调用，以从我的控制器操作加载数据并将其注入页面上的占位符：

$.ajax({
        url: '/Actors/GetActorsDataByFirstLetter?FirstLetter=' + firstLetter,
        success: function (ActorsData) {
            $(actorsList).html(ActorsData);
            if ($(actorsList).height() > 200) {
                $(actorsList).animate({ height: 200 }, 1000, function () {
                    $(ajaxLoader).fadeOut(1000);
                });
            }
            else {
                /*This animation is a dummy to make the fadeOut work in Chrome*/
                $(actorsList).animate({ color: 'inherit' }, 1000, function () {
                    $(ajaxLoader).fadeOut(1000);
                });
            }
        },
        error: function () {
            $(actorsList).html('An error occurred whilst attempting to retrieve the data for actors whose name starts with ' + firstLetter);
        }
    });

列表可能会很长，所以在成功时我会折叠高度超过200px的容器。之后我淡出相应的ajax加载动画gif。

出于某种原因，在Chrome中，动画GIF不会淡出未折叠的容器，即那些高度小于200px的容器。这只发生在我从另一个链接导航到该页面时，而不是在我重新加载页面时......在任何情况下都可以在FF中正常工作。

作为一个软糖，我放了一个动画，它对容器没有任何作用，但没有折叠，现在它可以工作......但我根本不喜欢它。

有人可以看到为什么fadeOut（）命令不能独立工作吗？

Answer 1

嗯......我可能错了，但在我看来，在Firefox和所有可用的浏览器中，height（）总是返回＆gt; 200，但在Chrome中，它返回＆lt; 200如果内容很小，那么永远不会在不可折叠的内容上调用fadeOut（）....

在你的代码中，似乎没有那个“else”虚拟块，fadeOut（）函数将永远不会在小于200像素的内容上调用。我会摆脱if / else语句。我就是这样做的..（虽然我没有测试过......让我知道它是怎么回事。

$.ajax({
    url: '/Actors/GetActorsDataByFirstLetter?FirstLetter=' + firstLetter,
    success: function (ActorsData) {
        $(actorsList).html(ActorsData);
        var finalHeight = $(actorsList).height() > 200 ? 200 : $(actorsList).height();
        $(actorsList).animate({ height: finalHeight }, 1000, function () {
            $(ajaxLoader).fadeOut(1000);
        });
    },
    error: function () {
        $(actorsList).html('An error occurred whilst attempting to retrieve the data for actors whose name starts with ' + firstLetter);
    }
});

jQuery fadeOut在Chrome中不起作用？

1 个答案: