gpt4 book ai didi

jquery - 使用 jQuery 单击时进行 CSS 转换

转载 作者:太空宇宙 更新时间:2023-11-04 03:43:02 25 4
gpt4 key购买 nike

我有一个要求,当它被点击时我需要转换一个已经转换的元素。对于下面的代码,点击时没有任何反应。

使用 jquery-ui 部分解决了这个问题,因为点击它会将元素带回原来的位置,然后缩放。

我不想使用 jquery-ui,之前的旋转动画应该在点击时停止,它应该在动画停止的地方缩放元素。

<html>
<head>
<style type="text/css">
.divInner{
-webkit-animation: myOrbit 5s linear infinite;
}

@-webkit-keyframes myOrbit {
from { -webkit-transform: rotate(0deg) translateX(20px) rotate(0deg); }
to { -webkit-transform: rotate(-360deg) translateX(20px) rotate(360deg); }
}
</style>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
$(".divInner").click(function() {
$(this).css('-webkit-transform','scale(1.3)');
});
</script>
</head>
<body>
<div class="divOuter" style="padding:20px;">
<div class="divInner" style="border:1px solid #ddd;width:30px;">
hello
</div>
</div>
</body>
</html>

这里是 Fiddle链接。

最佳答案

如果只能使用一个元素,则必须在第二个动画初始化之前获取元素的变换矩阵,移除第一个动画,将属性设置为之前保存的变换矩阵,然后开始第二个动画。这是因为一次不能对一个元素应用多个 transform

更好的选择是将 click 的效果应用于 parent,因为这将同时缩放父级和子级。如果您不想通过更改 .divOuter

影响页面布局,您可以拥有一个不作为直接父级的 div

关于jquery - 使用 jQuery 单击时进行 CSS 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24596338/

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