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;
}

jquery不够快，无法改变左上角的值

1 个答案: