我想使用 particle.js 创建一个网站，我想要一个名为 bar 的侧边导航在悬停时制作动画，但是当我包含 particle 时动画不起作用。 js 文件。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="main.css">
<script src="http://api.jquery.com/hover/"></script>
</head>
<body >
<div id="atoms">
<div class="container">
<a>LOGO<a>
<span class="bar" id="bar1"></span>
<span class="bar" id="bar2"></span>
<span class="bar" id="bar3"></span>
</div>
</div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
这是 html 代码，其中条形图需要在悬停时移动 CSS 代码如下。
html,body{
background:black;
}
html{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body{
font:normal 75% Arial, Helvetica, sans-serif;
}
canvas{
display:block;
vertical-align:bottom;
margin-top:-5%;
}
.container
{
background:transperant;
color:white;
text-align:center;
font-size: 80px;
border-radius:25px;
cursor: pointer;
}
.container a
{
cursor:pointer;
animation: change infinite 3s;
}
@-webkit-keyframes change {
from {
color:green;
}
to {
color:yellow;
}
}
.container .bar
{
width:30px;
height:2px;
padding:1px;
background:teal;
display:block;
margin-left:1%;
margin-top:-5%;
}
#bar1
{
margin-top:-5%;
}
#bar2
{
margin-top:0.5%;
}
#bar3
{
margin-top:0.5%;
}
.bar-move{
width:2%;
margin-left:2%;
transition:0.9s;
}
Javasript代码有3个部分particle.js、app.js和main.js。
particle.js 和 app.js 没有太大变化，但这里是 main.js。
$(".container .bar").hover(
function () {
$(this).addClass("bar-move");
},
function () {
$(this).removeClass("bar-move");
}
);
在我的 js 函数中，我尝试添加一个类并删除另一个类。
最佳答案
你不能使用 CSS 过渡来处理这种效果吗？
html,
body {
background: black;
}
.bar {
width: 30px;
height: 2px;
padding: 1px;
background: teal;
display: block;
margin-left: 1%;
margin-top: -5%;
transition: all 0.9s;
}
.bar:hover {
width: 2%;
margin-left: 2%;
}
#bar1 {
margin-top: 0;
}
#bar2 {
margin-top: 0.5%;
}
#bar3 {
margin-top: 0.5%;
}<div class="container">
<span class="bar" id="bar1"></span>
<span class="bar" id="bar2"></span>
<span class="bar" id="bar3"></span>
</div>关于javascript - 我想使用 particle.js 制作一个网站，但左侧导航栏动画不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53021112/