**已关闭。**此问题需要调试详细信息。它目前不接受答案。
**想要改进此问题？**更新问题，使其位于堆栈溢出主题上。

五天前关门。
改进这个问题
当我当前单击按钮时，动画会发生，但当第二次单击按钮时，动画不会发生，您认为我的代码有什么问题？我需要重置动画吗？
所以基本上我正在运行一个动画，滑动一个小部件来显示，然后显示另一个按钮来关闭这个小部件，只显示它的一部分。

$(document).ready(function() {

  $(".slidingDiv").hide();
  $(".show_hide").show();

  $('.show_hide').click(function() {
    $(".slidingDiv").toggle("slide");
    $(".show_hide").hide();
  });

  $('.slidingDiv').click(function() {
    $(".slidingDiv").hide();
    $(".show_hide").show();
  });

  $(".button2").hide();

  $('.button1').click(function() {
    document.getElementById('front_page_blur').classList.add('slideAnim');
    $(".button1").hide();
    $(".button2").show();
  });

  $('.button2').click(function() {
    document.getElementById('front_page_blur').classList.remove('slideAnim');
    document.getElementById('front_page_blur').classList.add('slideAnim2');
    $(".button2").hide();
    $(".button1").show();
  });
});

.slideAnim {
  animation-name: slide;
  animation-duration: 1.2s;
  animation-fill-mode: both;
}

.slideAnim2 {
  animation-name: slide2;
  animation-duration: 1.2s;
  animation-fill-mode: both;
}

@keyframes slide {
  from {
    margin-right: -475px;
  }
  to {
    margin-right: -50px;
  }
}

@keyframes slide2 {
  from {
    margin-right: -50px;
  }
  to {
    margin-right: -475px;
  }
}

.slidingDivRight {
  position: absolute;
  margin-right: -475px;
  top: 50px;
  padding: 20px;
}

.show_hide_button {
  position: absolute;
  top: 25px;
  left: -40px;
}

.show_hide_button_right {
  position: absolute;
  right: -455px;
}

.show_hide_button img {
  max-height: 350px;
}

.slidingDiv img {
  max-height: 490px;
}

.show_hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>