Question

所以我在jQuery .animate（）函数中遇到了这个问题，我在其中设置了一个元素的动画，它取代了与之关联的所有其他元素。

这是我正在使用的菜单

    <div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-9 navbar">
    <ul>
      <li id="home_button" class="menu_button">
        <i class="fa fa-home"></i>
        <p>Home</p>
      </li>
      <li id="projects_button" class="menu_button">
        <i class="fa fa-pencil"></i>
        <p>Projects</p>
      </li>
      <li id="about_button" class="menu_button">
        <i class="fa fa-balance-scale"></i>
        <p>About</p>
      </li>
      <li id="contact_button" class="menu_button">
        <i class="fa fa-user"></i>
        <p>Contact</p>
      </li>
    </ul>
  </div>
</div>

要了解我的意思，我将代码转移到jsfiddle

感谢任何帮助！

Answer 1

这是正常的HTML行为。浏览器＆＃34; flow＆＃34;布局，所以如果你把一个元素做得更大，它会回流文档的其余部分并取代它需要的元素。

如果您希望元素从一个位置移动到另一个位置，则必须将其从正常布局中取出。您可以通过将元素的position CSS属性设置为relative以外的其他属性来执行此操作。例如，position: absolute使元素相对于整个文档定位，position: fixed使元素相对于窗口的边界等定位。

此外，您可以使用也不会影响布局的CSS转换。这些允许您对元素进行平移，旋转和缩放的组合，而不会替换它的附近兄弟姐妹。例如，这对于鼠标悬停或从屏幕外转换项目的尺寸略有增加是理想的。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

无论哪种方式，我强烈建议使用CSS动画和过渡，而不是jQuery动画。然后，您可以使用jQuery应用类来启用和禁用动画。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

https://developer.mozilla.org/en/docs/Web/CSS/@keyframes

＆＃13;

$('.animation-test').on('click', function() {
  $(this).toggleClass('animation-test--enabled');
});

＆＃13;

* {
  font-family: arial, helvetica, san-serif;
}

.transition-test {
  padding: 20px;
  background: cornflowerblue;
  
  transition: transform 200ms ease-in-out;
}

.transition-test:hover {
  transform: scale(1.1);
}

.animation-test {
  padding: 20px;
  background: salmon;
}

.animation-test--enabled {
  animation: identifier 1s infinite;
}

@keyframes identifier {
  0%   { transform: translateX(0); }
  33%  { transform: translateX(20px); }
  66%  { transform: translateX(-20px); }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="transition-test">Hover over me to see a transition on a transform scale (no Javascript required)</div>

<br/>

<div class="animation-test">Click me to toggle an animation (Javscript applies and removes the class)</div>

＆＃13;

Answer 2

除了破坏你的布局之外，你还必须考虑一种方法来中途停止和反转动画，否则它会继续前进并且如果用户回到它可能会重复。尝试在你的小提琴上快速地在所有按钮上来回移动你的鼠标，看看我的意思。这很有趣，但不是你想要的效果。

幸运的是，不是所有东西都需要用javascript来解决。 CSS过渡很容易理解，并为您完成所有艰苦的工作。将它与psuedo选择器结合使用，您将获得所需的效果。

CSS过渡：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Psuedo课程：

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

.menu_button{
  transition: .250s width;
}
.menu_button:hover{
  width : 100px;
}

.menu_button{
  transition: .250s width;
}
.menu_button:hover{
  width : 100px;
}





/** Note so important **/
ul {
  list-style: none;
}

.container-fluid {
  margin: 0;
  padding: 0;
}

.photo-placeholder {
  height: 350px;
  background-color: green;
}


/* Navbar menu */

.menu_button {
  width: 35px;
  height: 35px;
  display: inline-block;
  margin-top: 15px;
  margin-right: 10px;
  border-radius: 20px;
}

#home_button {
  background-color: red;
}

#home_button i {
  margin-left: 0.6em;
  margin-top: 0.5em;
}

#projects_button {
  background-color: blue;
}

#projects_button i {
  margin-top: 0.5em;
  margin-left: 0.6em;
}

#about_button {
  background-color: yellow;
}

#about_button i {
  margin-top: 0.55em;
  margin-left: 0.55em;
}

#contact_button {
  background-color: green;
}

#contact_button i {
  margin-top: 0.5em;
  margin-left: 0.75em;
}

stretch {
  width: 80px;
}

<body>
  <div class="container-fluid">

    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-9 navbar">
        <ul>
          <li id="home_button" class="menu_button">
            <i class="fa fa-home"></i>
            <p>Home</p>
          </li>
          <li id="projects_button" class="menu_button">
            <i class="fa fa-pencil"></i>
            <p>Projects</p>
          </li>
          <li id="about_button" class="menu_button">
            <i class="fa fa-balance-scale"></i>
            <p>About</p>
          </li>
          <li id="contact_button" class="menu_button">
            <i class="fa fa-user"></i>
            <p>Contact</p>
          </li>
        </ul>
      </div>
    </div>

  </div>
</body>

jquery animate让其他元素跳舞

2 个答案: