Jquery动画按钮重新定位自己的bug

时间：2013-10-14 19:34:52

标签： javascript jquery html css

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

这是我的代码：

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <title>Marco Maissan - 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 Marco Maissan">
        <meta name="keywords" content="HTML,CSS,JavaScript, Jquery, PHP">
        <meta name="author" content="Marco Maissan">
    </head>

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



        <div Class="IconBorder">
            <a href="http://www.facebook.com/marco.maissan" TARGET="_blank"><img ID="Facebook" src="../IMG/facebook.png"/></a>          
        </div>
        <a href="http://twitter.com/marcomaissan/" 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="Marco Maissan"/></div>
            <div ID="Name"><b>Marco Maissan</b></div>   
        </div>                               
<!-- ---------------------------------------------------------------------------------------------------------------------- -->                         <div ID="Page2">
            <h2 style="font-size:80px;">Something about myself</h2>
            <p>
                Hi! My name is Marco Maissan. <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="mailto:marco.maissan@gmail.com" ID="Mail">Marco.Maissan@Gmail.com</a></p>
            </div>  

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

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

    </body>    
</html>

的CSS：

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
}

的Javascript 

$(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);    // 
 }); 
});

感谢您的帮助！ Marco Maissan

0 个答案:

没有答案
相关问题
最新问题