为什么我不能用jQuery同时针对这两个元素？
为什么我不能用jQuery同时针对这两个元素？
提问于 2018-06-13 05:54:02
我有两个微调器，一个有边框和关键帧动画，另一个空白。如果我用jQuery将两个微调器都作为目标，则只有空白微调器在工作。
我认为当您将鼠标悬停在该元素上时，可能是::before伪元素阻塞了"click“，但正如您在这里所看到的，这也在第二个微调器上。
什么(其他)可能是问题？
$(".spinner").click(function() {
$(this).toggleClass("scale");
});*,
*::before,
*::after {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
}
body {
background: #ccc;
}
.spinner {
width: 100px;
height: 100px;
background: #E2E2E2;
border-radius: 50%;
position: relative;
margin: 50px;
display: inline-block;
transition: transform .2s ease-in-out;
}
.spinner:after,
.spinner:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
}
.spinner-1 {
border-left: 2px solid red;
border-right: 2px solid blue;
border-top: none;
border-bottom: none;
animation: spin-1 1s ease-in-out infinite;
}
@keyframes spin-1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.scale {
transform: scale(1.1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner spinner-1"></div>
<div class="spinner spinner-2"></div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-13 06:01:02
问题是scale类定义的transform会被第一个元素的类中定义的transform覆盖。
$(".spinner").click(function() {
$(this).toggleClass("scale");
});*,
*::before,
*::after {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
}
body {
background: #ccc;
}
.spinner {
width: 100px;
height: 100px;
background: #E2E2E2;
border-radius: 50%;
position: relative;
margin: 50px;
display: inline-block;
transition: transform .2s ease-in-out;
}
.spinner:after,
.spinner:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
}
.spinner-1 {
border-left: 2px solid red;
border-right: 2px solid blue;
border-top: none;
border-bottom: none;
animation: spin-1 1s ease-in-out infinite;
}
@keyframes spin-1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.scale {
transform: scale(1.1);
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner spinner-1"></div>
<div class="spinner spinner-2"></div>
这个问题可以通过添加额外的css规则来解决：
$(".spinner").click(function() {
$(this).toggleClass("scale");
});*,
*::before,
*::after {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
}
body {
background: #ccc;
}
.spinner {
width: 100px;
height: 100px;
background: #E2E2E2;
border-radius: 50%;
position: relative;
margin: 50px;
display: inline-block;
transition: transform .2s ease-in-out;
}
.spinner:after,
.spinner:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
}
.spinner-1 {
border-left: 2px solid red;
border-right: 2px solid blue;
border-top: none;
border-bottom: none;
animation: spin-1 1s ease-in-out infinite;
}
@keyframes spin-1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-1-scaled {
from {
transform: scale(1.1) rotate(0deg);
}
to {
transform: scale(1.1) rotate(360deg);
}
}
.scale {
transform: scale(1.1);
}
.scale.spinner-1 {
animation: spin-1-scaled 1s ease-in-out infinite;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner spinner-1"></div>
<div class="spinner spinner-2"></div>
Stack Overflow用户
发布于 2018-06-13 06:03:57
您的问题与转换有关。
我创建了你的代码的jsfiddle：
https://jsfiddle.net/ethanryan/w3tkyuar/
并在css中为.scale添加了background-color: green：
.scale {
transform: scale(1.1);
background-color: green;
}正如您在单击时所看到的，每个微调器都将颜色更改为绿色。
所以问题不在toggleClass。
如果您注释掉@keyframes -1，您将看到.scale正常工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50826370
复制相关文章
相似问题