javascript - jquery 不够快，无法更改左上角的值

Question

我这里有一个非常简单的逻辑。我创建了容器，并将其放在所需位置的顶部，在这种情况下，我需要在此处发生 css 字体缩放效果。

但问题是，如果您在 .sortable li 周围移动鼠标足够快，单词就会开始飞来飞去!

演示:http://mac.idev.ge:800/words/将鼠标悬停在字词上。

是不是很奇怪？我该如何优化我的代码来解决这个问题？

// Zoom on hover effect for sortable items
// Create empty container
$("body").append("<div id='words_zoom'></div>");
var wz = $("#words_zoom");

$(document).on({
    mouseenter: function() {
        var item = $(this);
        var item_offset = item.offset();

        // position the zoom container
        var central_left = item_offset.left;
        var central_top = item_offset.top;

        wz.show();

        wz.css({"left":central_left,"top":central_top});

        wz.html(item.html());

        //
        //wz.stop().animate({"font-size":"2.2em",top:"-=3",left:"-=3"}, 300, "easeOutExpo");
    },
    mouseleave: function() {
        //
    }
}, ".sortable li:not('.delete-text')");

//
$(document).on("mouseleave", "#words_zoom", function() {
    //wz.css({"font-size":"2em",top:"+=3",left:"+=3"}).hide();
    wz.hide();
    wz.css({"left":0,"top":0});
});

Answer 1

问题实际上出在您的 CSS 中:

#words_zoom {
    background: #fff;
    display: none;
    position: absolute;
    font-family: 'Lato', sans-serif;
    font-size: 2em;
    cursor: pointer;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

尝试将过渡属性更改为仅过渡到您想要的属性(我猜您只需要字体大小)。

#words_zoom {
    background: #fff;
    display: none;
    position: absolute;
    font-family: 'Lato', sans-serif;
    font-size: 2em;
    cursor: pointer;
    text-transform: capitalize;
    -webkit-transition: font-size 0.3s ease;
    -moz-transition: font-size 0.3s ease;
    -o-transition: font-size 0.3s ease;
    -ms-transition: font-size 0.3s ease;
    transition: font-size 0.3s ease;
}