Question

box类内部的转换导致jQuery滞后，但是如果页面刷新了几次，则不会出现滞后。如果删除转换，则根本不会出现滞后，任何保持CSS转换而没有初始延迟的方法？

CSS：

html {
    background:url("http://www.phactr.com/css/img/background.jpg");
}
.box {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
    /* Chrome,Safari4+ */
    width: 230px;
    height: 230px;
    border-radius: 100%;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
    transition: .33s ease; 
}
.box:hover {
    width: 250px;
    height: 250px;
}
.over {
    -webkit-filter: blur(3px) opacity(0.3);
}

JQUERY：

$(document).ready(function () {
    $("#one").click(function () {
        setTimeout(function () {
            $("#one, #two, #three").addClass("over", "blind");
        }, 10);
    });    
});

Answer 1

您可以执行此操作以防止在单击时转换，但请注意，这将在使用over class重新悬停时禁用转换。

.over {
    transition: none;
    -webkit-filter: blur(3px) opacity(0.3);
}

要保持转换，您可以

$(document).ready(function () {
    $("#one").click(function () {
        setTimeout(function () {
            $("#one, #two, #three").addClass("over", "blind").show().delay(100).css('transition', '0.33s ease');
        }, 10);
    });
});

http://jsfiddle.net/Ukx4u/165/

.show()用于动画＆＃39;然后是延迟和更新过渡。我不确定为什么你有超时功能，如果它没有做我不知道的事情，它可以被删除。我把它留在原因是因为你在原始代码中有了它

CSS转换导致滞后

1 个答案: