div的jQuery滑动

Question

So, my code is supposed to move the pink coloured div to position 'right : 10px;'yet it is not working. here is the Fiddle for it. All replies will be appreciated.

HTML: About

<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

Your code has obtrusive java script in it. Instead of having an onclick event, I put an event listener on it. You're fiddle also didn't have jQuery on it, so I've added that in my updated fiddle .

The HTML

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

The jQuery:

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

You had an an undefined error in your original code. If you wanted to get fancy, you can slide it back after the next click.

The jQuery

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

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

The fiddle .