jquery .animate() 会滞后，如果我使用它 5 次或更多次

Question

$(document).ready(function() {
    $(".g-t").mouseover(function() {
        $(this).addClass("gramericin")
        $(".g-t").click( function () {
            $(".grammar-box2").stop().animate({ width: 'show' }); 
            $(".grammar-box2 #div1").load(""); 
        }); 
    });
    $(".g-t").mouseout(function() {
        $(this).removeClass("gramericin"); 
        $(".grammar-box2").click(function() {
            $(".grammar-box2 #div1").empty();
            $(".grammar-box2").stop().animate({ width: 'hide' });
        });
    });
});

.grammar-box2 {
    display: none;
    width: 450px;
    height: 520px;
    position: absolute;
    right: 0;
    z-index: 10;
    background-color: rgb(228, 255, 179);
    color: black;
    font-size: large;
    font-weight: bolder;
    padding: 10px;    
}
.gramericin {
    background-color: rgba(200, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grammar-box2">
    <div id="div1"></div>
</div>
<p class="g-t">something</p>

$(document).ready(function() {
    $(".g-t").click( function () {
        $(".grammar-box2").animate({ width: 'show' }); 
        $(".grammar-box2 #div1").load("grammar.html #amisare"); 
    }); 
});

$("#butonx").click(function() {
    $(".grammar-box2 #amisare").empty();
    $(".grammar-box2").animate({ width: 'hide' });
});
});

我试过 .stop() 但没用。如果我经常为盒子设置动画，它会在为盒子设置动画时开始滞后。

编辑：当我删除 load() 事件时，animate() 没有滞后。但是我必须使用 load() 事件来获取一些数据。

Answer 1

嗯。使用您的代码，我制作了一个动画，仅在 CSS 中使用 transition，并在单击 something

时在 transform:scaleX(0) 和 transform:scaleX(1) 之间切换

我还使用了 transform-origin:right，所以比例尺的原点在 div 的右侧。

在 JQ 中，我用 addClass 和 removeClass

更改了动画

如果这是你想要的，请告诉我

请参阅下面的代码段或 jsfiddle

$(".g-t").mouseover(function() {
 $(this).addClass("gramericin")
$(".g-t").click( function () {
$(".grammar-box2").addClass("animateME")
$(".grammar-box2 #div1").load(""); 
}); 
});
$(".g-t").mouseout(function() {
 $(this).removeClass("gramericin"); 
 $(".grammar-box2").click(function() {
 $(".grammar-box2 #div1").empty();
 $(".grammar-box2").removeClass("animateME")
});
});

.grammar-box2 {
    width: 450px;
    height: 520px;
    position: absolute;
    right: 0;
    z-index: 10;
    background-color: rgb(228, 255, 179);
    color: black;
    font-size: large;
    font-weight: bolder;
    padding: 10px;
        transform:scaleX(0);
        transition:0.3s;
        transform-origin:right;
    
}
.gramericin {
    background-color: rgba(200, 0, 0, 0.5);
}
.animateME {
  transform:scaleX(1)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grammar-box2">
<div id="div1"></div>
</div>

<p class="g-t">something</p>

jquery .animate() 会滞后，如果我使用它 5 次或更多次

jquery .animate() is lagging, if I use it 5 times or more

html

javascript

jquery

jquery-animate