javascript - Jquery 动画按钮重新定位自身错误

Question

我的网页上有一个带有 jquery wiggle 动画或类似内容的按钮：p。当我在按钮上快速单击几次，然后单击页面上的其他位置时（无论在哪里），按钮都会跳到开头而不是停留在原处。这是一个例子。前 3 个按钮包含“错误”，其他四个按钮应该是这样的。http://imageshack.us/a/img30/609/l9r3.png

这是我的代码：

$(document).ready(function() { //Zodra het document klaar is met laden, start hij de functie 
  $("#Page1Button").click(function() { //Als op #Page1Button wordt geklikt, start de volgende functie
    $('html, body').stop().animate({ //De html pagina wordt geanimeerd waarbij hij naar het genoemde 
      scrollTop: $("#Page1").offset().top - 100 //gedeelte scrollt, -100 pixels, in 2,5 seconden.
    }, 2500);
  });
});

$(document).ready(function() {
  $("#Page2Button").click(function() {
    $('html, body').stop().animate({
      scrollTop: $("#Page2").offset().top - 100
    }, 2500);
  });
});
$(document).ready(function() {
  $("#Page3Button").click(function() {
    $('html, body').stop().animate({
      scrollTop: $("#Page3").offset().top - 100
    }, 2500);
  });
});

$(document).ready(function() {
  $("#Page4Button").click(function() {
    $('html, body').stop().animate({
      scrollTop: $("#Page4").offset().top - 100
    }, 2500);
  });
});

$(document).ready(function() {
  $("#Page5Button").click(function() {
    $('html, body').stop().animate({
      scrollTop: $("#Page5").offset().top - 100
    }, 2500);
  });
});

$(document).ready(function() {
  $("#Page6Button").click(function() {
    $('html, body').stop().animate({
      scrollTop: $("#Page6").offset().top - 100
    }, 2500);
  });
});

$(document).ready(function() {
  $("#Page7Button").click(function() {
    $('html, body').stop().animate({
      scrollTop: $("#Page7").offset().top - 100
    }, 2500);
  });
});




$(window).load(function() {
  $(".loader").fadeOut("slow");
});


$(document).ready(function() {
  $("#Head").mouseenter(function() {
    $("#Head").fadeTo("slow", 1);
  });
});
$(document).ready(function() {
  $("#Head").mouseleave(function() {
    $("#Head").fadeTo("slow", 0.8);
  });
});


$(function() { // start een functie van jquery, $ geeft aan dat het jquery is
  $('.PageButton').click(function() { // $ geeft aan dat een jquery object komt, daarna de functie die wordt uitgevoerd bij klikkn
    $(this).effect("bounce", {
      direction: 'right',
      times: 3
    }, 300); // 
  });
});

p {
  font-family: Caviar Dreams;
}

section {
  font-weight: bolder;
}

li {
  font-size: 28px;
}

body,
html {
  height: 100%;
  font-family: Caviar Dreams;
}

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: url('../IMG/page-loader.gif') 50% 50% no-repeat rgb(249, 249, 249);
}

.PageButton {
  list-style: none;
}

#Page1Button {
  width: 150px;
  height: 60px;
  background-color: #6633ff;
  border-radius: 12px;
  position: fixed;
  top: 100px;
  left: 10px;
  opacity: 1;
  text-align: center;
  font-size: 36px;
  padding-top: 10px;
  z-index: 99;
  font-weight: bold;
}

#Page1Button:hover {
  background-color: #E11CE8;
  font-weight: bolder;
}

#Page2Button {
  width: 150px;
  height: 80px;
  background-color: #6633ff;
  border-radius: 12px;
  position: fixed;
  top: 190px;
  left: 10px;
  opacity: 1;
  text-align: center;
  font-size: 34px;
  z-index: 99;
  font-weight: bold;
}

#Page2Button:hover {
  background-color: #E11CE8;
}

#Page3Button {
  /*130*/
  width: 150px;
  height: 80px;
  background-color: #6633ff;
  border-radius: 12px;
  position: fixed;
  top: 290px;
  left: 10px;
  opacity: 1;
  text-align: center;
  font-size: 22px;
  z-index: 99;
  font-weight: bold;
}

#Page3Button:hover {
  background-color: #E11CE8;
}

#Page4Button {
  width: 150px;
  height: 80px;
  background-color: #6633ff;
  border-radius: 12px;
  position: fixed;
  top: 390px;
  left: 10px;
  opacity: 1;
  text-align: center;
  font-size: 30px;
  z-index: 99;
  font-weight: bold;
}

#Page4Button:hover {
  background-color: #E11CE8;
}

#Page5Button {
  width: 150px;
  height: 80px;
  background-color: #6633ff;
  border-radius: 12px;
  position: fixed;
  top: 490px;
  left: 10px;
  opacity: 1;
  text-align: center;
  font-size: 30px;
  z-index: 99;
  font-weight: bold;
}

#Page5Button:hover {
  background-color: #E11CE8;
}

#Page6Button {
  width: 150px;
  height: 80px;
  background-color: #6633ff;
  border-radius: 12px;
  position: fixed;
  top: 590px;
  left: 10px;
  opacity: 1;
  text-align: center;
  font-size: 34px;
  z-index: 99;
  font-weight: bold;
}

#Page6Button:hover {
  background-color: #E11CE8;
}

#Page7Button {
  /*130*/
  width: 150px;
  height: 80px;
  background-color: #6633ff;
  border-radius: 12px;
  position: fixed;
  top: 690px;
  left: 10px;
  opacity: 1;
  text-align: center;
  font-size: 34px;
  z-index: 99;
  font-weight: bold;
}

#Page7Button:hover {
  background-color: #E11CE8;
}

#Name {
  position: absolute;
  font-family: Caviar Dreams;
  font-size: 40px;
  bottom: 10px;
  right: 70px;
}

.ImageVideoWidthHeight {
  width: 960px;
  height: 540px;
  border: 3px solid violet;
}

.ImageVideoWidthHeight:hover {
  width: 960px;
  height: 540px;
}

#Facebook {
  position: fixed;
  top: 100px;
  right: 50px;
  opacity: 0.7;
}

#Facebook:hover {
  position: fixed;
  top: 100px;
  right: 50px;
  opacity: 0.9;
  width: 70px;
  height: 70px;
}

#Twitter {
  position: fixed;
  top: 165px;
  right: 50px;
  opacity: 0.7;
}

#Twitter:hover {
  position: fixed;
  top: 165px;
  right: 50px;
  opacity: 0.9;
  width: 70px;
  height: 70px;
}

#Head {
  position: absolute;
  bottom: 0;
  right: 55vh;
  height: 43vh;
  width: 50vh;
  opacity: 0.8;
}

#Page1 {
  font-family: Caviar Dreams;
  position: relative;
  font-size: 50px;
  text-align: center;
  background-color: #D8D0F4;
  width: 80%;
  height: 80vh;
  border-radius: 60px;
  margin: 10vh auto 10vh auto;
  border: 10px solid #FFE1E1;
}

#Page2 {
  font-family: Caviar Dreams;
  font-size: 30px;
  text-align: center;
  background-color: #D8D0F4;
  width: 80%;
  height: 80vh;
  border-radius: 60px;
  margin: 20vh auto 10vh auto;
  border: 10px solid #FFE1E1;
}

#Page3 {
  font-family: Caviar Dreams;
  font-size: 30px;
  text-align: center;
  background-color: #D8D0F4;
  width: 80%;
  height: 80vh;
  border-radius: 60px;
  margin: 20vh auto 0vh auto;
  border: 10px solid #FFE1E1;
}

#Page4 {
  font-family: Caviar Dreams;
  font-size: 30px;
  text-align: center;
  background-color: #D8D0F4;
  width: 80%;
  height: 290vh;
  border-radius: 60px;
  margin: 20vh auto 0vh auto;
  border: 10px solid #FFE1E1;
}

#Page5 {
  font-family: Caviar Dreams;
  font-size: 30px;
  text-align: center;
  background-color: #D8D0F4;
  width: 80%;
  height: 80vh;
  border-radius: 60px;
  margin: 20vh auto 0vh auto;
  border: 10px solid #FFE1E1;
}

#Page6 {
  font-family: Caviar Dreams;
  font-size: 30px;
  text-align: center;
  background-color: #D8D0F4;
  width: 80%;
  min-height: 80vh;
  border-radius: 60px;
  margin: 20vh auto 0vh auto;
  border: 10px solid #FFE1E1;
}

#Page7 {
  font-family: Caviar Dreams;
  font-size: 30px;
  text-align: center;
  background-color: #D8D0F4;
  width: 80%;
  height: 80vh;
  border-radius: 60px;
  margin: 20vh auto 0vh auto;
  border: 10px solid #FFE1E1;
}

#Creative {
  font-family: Caviar Dreams;
  font-size: 50px;
  margin-top: -50px;
}

#Mail {
  text-decoration: none;
  color: #7094FF;
}

#Mail:hover {
  color: blue;
  font-size: 30px;
  font-weight: bolder;
}

.PageButton {
  text-shadow: 0px 1px 0px #999, 0px 1px 0px #888
}

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <title>Portfolio</title>
  <link href="../CSS/MyStyle.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <script src="../JS/MyScript.js"></script>
  <meta name="description" content="Portfolio">
  <meta name="keywords" content="HTML,CSS,JavaScript, Jquery, PHP">
  <meta name="author" content="">
</head>

<body style="background:#81DAF5">



  <div Class="IconBorder">
    <a href="http://www.facebook.com/" TARGET="_blank"><img ID="Facebook" src="../IMG/facebook.png" /></a>
  </div>
  <a href="http://twitter.com/" TARGET="_blank">
    <img ID="Twitter" src="../IMG/twitter.png" />
  </a>

  <div class="loader"></div>

  <!-- ---------------------------------------------------------------------------------------------------------------------- -->
  <!-- Buttons -->
  <ul>
    <li ID="Page1Button" class="PageButton">
      Home
    </li>

    <li ID="Page2Button" class="PageButton">
      About me
    </li>
    <li ID="Page3Button" class="PageButton">
      Besides Development
    </li>

    <li ID="Page4Button" class="PageButton">
      Things I've made
    </li>

    <li ID="Page5Button" class="PageButton">
      Services
    </li>

    <li ID="Page6Button" class="PageButton">
      Blog
    </li>

    <li ID="Page7Button" class="PageButton">
      Contact me
    </li>
  </ul>
  <!-- ---------------------------------------------------------------------------------------------------------------------- -->
  <div ID="Page1">
    <h1>Welcome at my portfolio</h1>
    <div ID="Creative">
      <h2>Being creative is being me</h2>
    </div>
    <div><img ID="Head" src="../IMG/head.png" alt="" /></div>
    <div ID="Name"><b></b></div>
  </div>
  <!-- ---------------------------------------------------------------------------------------------------------------------- -->
  <div ID="Page2">
    <h2 style="font-size:80px;">Something about myself</h2>
    <p>
      Hi! My name is X. <br><br> I'm 16 years old and for now I study at Zadkine Zuid - School of Excellence, learning Application- and Mediadevelopment.</p>
    <br>
    <p style="font-weight:bold; font-size:40px;">Programming Skills: <br><br> HTML = 90% <br> CSS = 80% <br> PHP = 10% <br> Javascript = 10% </p>
  </div>
  <!-- ---------------------------------------------------------------------------------------------------------------------- -->
  <div ID="Page3">
    <h2 style="font-size:80px;">Besides Development</h2>
    <p>Besides development, I am verry musical. I've played guitar for over 8 years, piano for 1 year and currently I'm drumming solo snare drum in a drumline. <br><br> Still, I love being busy making stuff with my computer. I'm verry creative in video editing
      and making 3D animations. I've created a few fluid and physics simulations with Blender 3D and made a few simple games with Unity3D.</p>
  </div>
  <!-- ---------------------------------------------------------------------------------------------------------------------- -->
  <div ID="Page4">
    <h2 style="font-size:80px;">Things I've made</h2>
    <p>
      I haven't made any websites yet (besides this portfolio), so I'm searching for work!
      <img class="ImageVideoWidthHeight" src="../IMG/UnderConstruction.jpg" />
    </p>


    <p>
      This is one of the fluid simulations I've made with Blender3D <br>
      <video class="ImageVideoWidthHeight" autoplay loop>
                        <source src="../VID/Fluid.mp4" type="video/mp4">                        
                    </video>
    </p>
    <p>
      A realistic fluid picture, also made with Blender3D
      <img class="ImageVideoWidthHeight" src="../IMG/iMade2.jpg" />
    </p>
    <p>
      Simple intro made with Blender3D <br>
      <video class="ImageVideoWidthHeight" autoplay loop>
                    <source src="../VID/IntroVideo.mp4" type="video/mp4">                       
                    </video>
    </p>

  </div>
  <!-- ---------------------------------------------------------------------------------------------------------------------- -->
  <div ID="Page5">
    <h2 style="font-size:80px;">Services</h2>
    <p> I can deliver websites made with HTML, CSS, PHP, Javascript and Jquery. I am not responsible for webhosting etc. <br> Before I can make websites, I need the content. This is because I have to keep the length and width of the webpage in mind.<br><br>      I can make webpage navigation buttons with CSS, but I am also able to use custom made butons.
  </div>
  <!-- ---------------------------------------------------------------------------------------------------------------------- -->
  <div ID="Page6">
    <h2 style="font-size:80px;">Blog</h2>

    <form>
      <script>
        displayDate();
      </script>
      <p>Comment: <br>
        <textarea name="enter your comments" cols="50" rows="6" type="text" maxlength="500" placeholder="Enter your text..." style="resize: none;"></textarea>
        <br>
        <button>Submit</button>
      </p>
    </form>



    <ul>
      <li>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </li>
      <br>
      <li>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </li>
      <br>
      <li>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </li>
      <br>
      <li>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </li>
      <br>
      <li>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </li>
    </ul>
  </div>
  <!-- ---------------------------------------------------------------------------------------------------------------------- -->
  <div ID="Page7">
    <h2 style="font-size:80px;">Contact me</h2>
    <h3> Interested?</h3>
    <p>Mail me!<br>
      <a href="./" ID="Mail"></a>
    </p>
  </div>

  <div ID="Spacing"></div>

  <h4 style="text-align:center">
    &copy; 2013, X
  </h4>

</body>

</html>

谢谢你的帮助！

javascript - Jquery 动画按钮重新定位自身错误

0 回答 0

Related

Reference