我想使用particle.js 制作一个网站，但左侧导航栏动画不起作用答案

【问题标题】：I wanted to make a website using particle.js but the left nav bar animation is not working我想使用particle.js 制作一个网站，但左侧导航栏动画不起作用
【发布时间】：2018-10-27 10:46:47
【问题描述】：

我想使用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 函数中，我尝试添加一个类并删除另一个类。

【问题讨论】：

标签： javascript html css particles.js

【解决方案1】：

你不能使用 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>

【讨论】：