0

我在这里有一个非常简单的逻辑。我创建了容器，并将其放在我需要效果的所需位置的顶部，以在这种情况下发生 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});
});
4

1 回答 1

0

问题实际上出在您的 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;
}

尝试将转换属性更改为仅在您想要的属性上进行转换（我猜您只需要 font-size ）。

#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;
}
于 2013-10-14T09:31:29.113 回答