Question

我成功编写代码，在单击按钮时向左滑动div。但是，当点击任何其他内容时，我无法将其移回原始位置。这就是我想要实现的目标。请参阅下面的代码。我尝试了一些事情似乎没有任何效果。

<script>
      (function($) {
        $(":not(.categories)").click(function () {
          $(".categories").css({"left": "50%", "transition": "font-size 0.6s"});
        });
      })(jQuery);

    </script>

上面的代码是最接近的，但它几乎就像页面刷新一样快速回到原位。我想要移动div的相同动画样式将其移回。

我希望我的问题足够详细。有什么想法吗？

.categories {
  position: fixed;
  font-family: 'Lato', Sans-serif;
  font-weight: normal;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: inherit;
  margin: auto;
  text-align: center;
  cursor: default;
}

button.content {
  background: transparent;
  border: none;
  line-height: 2;
  color: black;
  font-size: 16px;
  cursor: pointer;
  outline: 0 !important;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0.8em 0;
  padding: 0;
}

button {
  transition: font-size 0.6s;     
}

button:hover {
  font-size: 110%;   
  text-align: center;
}

button:click {
  font-size: 110%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="HandheldFriendly" content="true">
    <link href="main.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript"></script>
  </head>

  <body>

    <div class="categories">
      <hr/>
      <button class="content" id="a">Architecture</button>
      <hr/>
      <button class="content" id="g">Graphic Design</button>
      <hr/>
      <button class="content" id="p">Photography</button>
      <hr/>
      <button class="content" id="l">Learning</button>
      <hr/>
    </div>

    <script>
      (function($) {
        $(".categories").click(function() {
          $(".categories").animate({
            left: "-=340px"
          }, 1000);
          return false;
        });
      })(jQuery);

    </script>

    <script>
      (function($) {
        $(":not(.categories)").click(function() {
          $(".categories").css({
            "left": "50%",
            "transition": "font-size 0.6s"
          });
        });
      })(jQuery);

    </script>
  </body>

</html>

Div onmouseup的反向动画

0 个答案: