我的动画正在运行，但并不完全干净。如你看到的， 它开始是 block 状的，如果动画完成，它会恢复正常(到图像)。 我希望它不是 block 状的，所以我的动画看起来很流畅。
在全屏模式下更好地观看
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#show").ready(function () {
$(".target1").show("slide", {direction: "left"}, 1000);
});
$("#show").ready(function () {
$(".target2").show("slide", {direction: "right"}, 1000);
});
$("#show").ready(function () {
$(".target3").show("slide", {direction: "left"}, 1000);
});
});
</script>
</head>
<body>
<img src="https://image.ibb.co/eMn59m/Samir_Boven.png" id="blauw" class="target1"
style="margin-top: 10px; width: 100%; height: 300px; display: none">
<img src="https://image.ibb.co/n4WAaR/Samir_Midden.png" id="geel" class="target2"
style="margin-top: -70px; width: 100%; height: 300px; display: none">
<img src="https://image.ibb.co/hLZ7N6/Samir_Onder.png" id="blauw2" class="target3"
style="margin-top: -40px; width: 100%; height: 300px; display: none">
</div>
</body>
</html>最佳答案
幻灯片动画对于浏览器来说很重，因为动画是通过更改数值和使用 cpu 呈现的。
您可以使用 Transit 库添加一个 Jquery 动画替换，它添加了使用 css 进行转换(GPU 加速)的好特性，所以
function floatIn($element) {
$element.css({ 'opacity': 0, 'margin-top': 200px });
$element.animate({ 'opacity': 1, 'margin-top': 0 }, { duration: 500 });
}
在这种情况下，将比您的方法运行得更顺畅。
关于javascript - 图像转换 jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47791084/