Question

我做了一个小功能，允许点击一个文本元素，然后飞到（具有绝对位置的动画顶部/左侧偏移）到特定位置并消失。

以下是此问题的fiddle。

这是来自点击处理程序的代码（在coffescript中）：

    var hoveringSelection = $ "<div class='flying cm-variable'>#{selection}</div>"

    var dropdownToggle = $ '#watchlist-dropdown'
    hoveringSelection.css({
      position: 'absolute'
      top:  window.mouse.y
      left: window.mouse.x
      display: 'block'
      opacity: 1
    })
    .appendTo('body')
    .animate({
        top: dropdownToggle.offset().top
        left: dropdownToggle.offset().left
        opacity: 0.0
      },
      {
        duration: 1500
        easing: 'easeOutCubic'
        complete: () ->
          hoveringSelection.remove()
          updateQueueSize()
      }

你可以看到它应该是不透明度0然后被删除。问题是它在被删除之前显示了一瞬间（有50％的可能性）。我在调用.remove（）之前使用警报对其进行了测试，以便javascript执行暂停，但它仍然在警报执行之前完成。因此，问题必须在调用animate（）的完成回调之前出现。

我无法在Firefox中观察到这种行为。

我该如何避免呢？

Answer 1

我已经看到这是一个错误（http://www.brycecorkins.com/blog/jquery-fadein-opacity-bug-in-chrome-and-ie-8/）。问题是不透明度。我对您的脚本进行了一些更改以实现您的目标。在动画结束时，我将不透明度设置为0.01，然后在完成时执行删除元素的函数。我希望这对你有所帮助。

http://jsfiddle.net/XjesX/1/

$(function () {
    $.extend($.easing, {
        easeOutCubic: function (x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        }
    });

    var mouseListener = function (event) {
        if (!window.mouse) window.mouse = {
            x: 0,
            y: 0
        };
        window.mouse.x = event.clientX || event.pageX;
        window.mouse.y = event.clientY || event.pageY;
    };
    document.addEventListener('mousemove', mouseListener, false);

    var fly = function() {


        var hoveringSelection = $("<div class='flying'>A word</div>");

        var dropdownToggle = $('#flytome');
        hoveringSelection.css({
            position: 'absolute',
            top: window.mouse.y,
            left: window.mouse.x,
            display: 'block',
            opacity: 1.0
        })
            .appendTo('body')
            .animate({
            top: dropdownToggle.offset().top,
            left: dropdownToggle.offset().left,
            opacity: 0.01

        }, 1500, 'easeOutCubic' ,function(){
            alert($('.flying').length);
            $('.flying').remove();
            alert($('.flying').length);
      });

    };
    $('#flyBtn').click(fly);
});

我在删除之前和之后添加了alert($('.flying').length);以显示该元素已从DOM中删除。如果你删除那2行，你会更好地看到没有闪烁效果。

在执行回调之前，jQuery动画淡出闪烁（chrome）

1 个答案: