主页 / 问题 / 1480124
Accepted
Artem Criticall Metr
Asked:2022-12-22 16:32:34 +0000 UTC2022-12-22 16:32:34 +0000 UTC

在 .on(click) 中取消动画动作

  • 772

告诉一个新手程序员，他的腿妈妈，如何在再次按下点击时正确实现取消动作？附上示例代码

$(document).ready(function() {

  var musplmini, musicphotomini, nameplayedtrack, openplayer;

  jQuery('.openplayer').on('click', function() {
    musplmini = jQuery('.musplmini').animate({
      height: "400px"
    })
    musicphotomini = jQuery('.musicphotomini').animate({
      top: '20px',
      left: '50px',
      height: '150px',
      width: '150px',
      borderRadius: '150px'
    })
    nameplayedtrack = jQuery('.nameplayedtrack').animate({
      top: '240px',
      left: '5px',
      height: '40px',
      width: '240px',
      fontSize: '16px'
    })
    openplayer = jQuery('.openplayer').animate({
      top: '383px'
    });
  });
});
/* Плеер мини */

.musplmini {
  position: fixed;
  top: 41px;
  width: 250px;
  height: 40px;
  right: 100px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  ;
  border-radius: 0px 0px 15px 15px;
}


/* Обложка трека */

.musicphotomini {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 10px;
  border-radius: 25px;
  overflow: hidden;
  animation: 5s linear 0s normal none infinite running rot;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Название трека */

.nameplayedtrack {
  position: absolute;
  width: 190px;
  height: 20px;
  top: 5px;
  left: 50px;
  color: #000000b4;
  font-size: 12px;
  text-align: center;
}


/* раскрыть плеер */

.openplayer {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 38px;
  left: 115px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="musplmini">
  <div class="openplayer">
    <img src="img/ico/ico-open-player.png"></div>
  <section class="musicphotomini">
    <img src="img/pic.png"></section>
  <span class="nameplayedtrack">
            David Guetta and Bebe Rexha - I'm Good (Blue)
        </span>

</div>

jquery

1 个回答

  1. Best Answer

    我不假装是正确的方法，但在我看来，使用样式而不是通过 jQuery 处理动画更合适。它更容易，而且您不必为浏览器加载不必要的脚本。在编程方面，您所需要的只是添加或删除一个类，该类将通过单击按钮来指示按下。然后，根据此类的存在，应用必要的样式。

    例子：

    $(document).ready(function() {
  jQuery('.openplayer').on('click', function() {
    $('.musplmini').toggleClass('clicked');
  });
});
    /* Плеер мини */

.musplmini {
  position: fixed;
  top: 41px;
  width: 250px;
  height: 40px;
  right: 100px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 15px 15px;
  transition: all 1s ease;
}


.musplmini.clicked { /*раскрытый блок*/
  height: 400px;
}


/* Обложка трека */

.musicphotomini {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 10px;
  border-radius: 25px;
  overflow: hidden;
  animation: 5s linear 0s normal none infinite running rot;
  transition: all 1s ease;
}

.musplmini.clicked .musicphotomini { /*раскрытый блок*/
  width: 150px;
  height: 150px;
  top: 20px;
  left: 50px;
  border-radius: 150px;
  
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Название трека */

.nameplayedtrack {
  position: absolute;
  width: 190px;
  height: 20px;
  top: 5px;
  left: 50px;
  color: #000000b4;
  font-size: 12px;
  text-align: center;
  transition: all 1s ease;
}

.musplmini.clicked .nameplayedtrack {  /*раскрытый блок*/
  width: 240px;
  height: 40px;
  top: 240px;
  left: 5px;
  font-size: 16px;
}


/* раскрыть плеер */

.openplayer {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 38px;
  left: 115px;
  cursor: pointer;
  transition: all 1s ease;
}

.musplmini.clicked .openplayer { /*раскрытый блок*/
  top: 383px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="musplmini">
  <div class="openplayer">
    <img src="img/ico/ico-open-player.png">
  </div>
  <section class="musicphotomini"><img src="img/pic.png"></section>
  <span class="nameplayedtrack">David Guetta and Bebe Rexha - I'm Good (Blue)</span>
</div>

    • 0

相关问题