div的jQuery滑动

Question

所以，我的代码应该将粉红色的 div 移动到“right : 10px;”的位置但它不起作用。 这是它的小提琴。 所有答复将不胜感激。

HTML：关于

<div id="aboutSector"></div>

jQuery：

function aboutShow() {
$("#aboutSector").animate({ right: "10px" }, "fast");
};

CSS：

#navBar {
width: 80%;
height: 40px;
left: 10%;
top: 0px;
position: absolute;
box-shadow: 0 2px 2px -2px black;
}

Answer 1

您的代码中包含引人注目的 Java 脚本。 我没有使用onclick事件，而是在其上放置了一个事件侦听器。 你的小提琴也没有 jQuery，所以我在我更新的 fiddle 中添加了它。

HTML

<div id="navBar">
    <button id="aboutButton">About</button>
</div>
<div id="aboutSector"></div>

jQuery：

$(document).ready(function() {
  $("#aboutButton").click(function() {
    $("#aboutSector").animate({ right: "10px" }, "fast");
  });
});

您的原始代码中有一个undefined错误。 如果您想花哨，可以在下次单击后将其滑回。

jQuery

$(document).ready(function() {
    $("#aboutButton").click(function() {
      var right = $("#aboutSector").css("right"), 
          shifter = (right == "10px") ? "0px" : "10px"; 

      $("#aboutSector").animate({ right: shifter }, "fast");
    });
});

小提琴。