gpt4 book ai didi

javascript - 图像转换 jquery

转载 作者:太空宇宙 更新时间:2023-11-04 07:50:40 26 4
gpt4 key购买 nike

我的动画正在运行,但并不完全干净。如你看到的,它开始是 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com