javascript - Jquery のアニメーションボタンが自分自身を再配置するバグ

Question

私のウェブページには、jquery ウィグルアニメーションなどのボタンがあります。ボタンを数回すばやくクリックしてから、ページの別の場所 (場所は関係ありません) をクリックすると、ボタンはその場所にとどまらず、最初にジャンプします。ここに例があります。最初の 3 つのボタンには「バグ」が含まれており、残りの 4 つのボタンは本来あるべき状態です。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

javascript - Jquery のアニメーションボタンが自分自身を再配置するバグ