Question

我是JQuery的新手，并且在页面加载时尝试在标题中的h1标签上做一些动画。但它似乎并没有起作用。我认为这不是负载功能。任何人都可以告诉我为什么？调用.on（＆＃39; load＆＃39;，function（）{}）和简单加载（function（）{}）之间有什么区别吗？

<html>
<head>      
    <title>UI Design Assignment</title>
<style>
        #header{
            background-color : #5555FF;
            width : 100%;
            height: 8%;
            text-align : center;
            color : white;
            box-shadow : 0 0 25px #5555FF;
        }
        #imagediv{
            height: 80%;
            width : 15%;
            padding-top : 50px;
            padding-left : 85px;
            -webkit-transform: rotate(-30deg);
            float : left;               
        }           
        #registrationdiv{
            width : 65%;
            height: 80%;                
            font-family : Calibri;
            font-size : 20px;
            border-radius : 2;
            float : left;
        }
        #registrationtable{
            position : relative;
            margin : 18px;
            align : center;
            background-color : #AAA;
            overflow-y : scroll;
            box-shadow : 0 0 17px gray;
            border-radius : 5%;
        }
        #footer{
            background-color : #5555FF;
            width : 100%;
            height: 8%;
            color : white;
            text-align : center;                
            margin : 0px auto 0px auto;
            padding : 2px;
            box-shadow : 0 0 25px #5555FF;
            clear : both;
        }

    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>

        $(document).ready(function(){
            $( "#registrationimg" ).mouseenter(function() {

                $( this ).fadeOut( 1000 );
            });
            $( "#registrationimg" ).mouseleave(function() {
                $( this ).fadeIn( 1000 );
            });
            $("h1").load(function(){
                $(this).css({
                    "left": "500px",
                    "-webkit-transform":"rotate(360deg)",
                    "-webkit-transition": "1s"});
            });
        });

        function submitform(){

            if(document.getElementById("iaccept").checked==false){
                alert("You cannot go ahead without accepting the terms and conditions.");
            }
            else{
                alert("Registration completed.");
            }
        }   
        function resetform(){
            window.reset();
        }
    </script>
</head>
<body>
    <div id="header">           
        <h1>USER REGISTRATION</h1>
    </div>
    <div id="imagediv">
        <img id="registrationimg" src="registration.jpg"/>
    </div>
    <div id="registrationdiv"><center>      
    <form name="registrationform"  onsubmit="submitform()">
        <table id="registrationtable" cellspacing="10">
            <tr><td>Email <font color="red">*</font> : </td><td><input type="email" name="email" required></td></tr>
            <tr><td>Password <font color="red">*</font> : </td><td><input type="password" required></td></tr>
            <tr><td>Confirm Password <font color="red">*</font> : </td><td><input type="password" required></td></tr>
            <tr><td>First Name <font color="red">*</font> : </td><td><input type="text"  required></td></tr>
            <tr><td>Last Name : </td><td><input type="text" ></td></tr>
            <tr><td>Address : </td><td><input type="text" ></td></tr>
            <tr><td>City : </td><td><input type="text" ></td></tr>
            <tr><td>State : </td><td><input type="text" ></td></tr>
            <tr><td>Country : <font color="red">*</font></td><td><input type="text" required></td></tr>
            <tr><td>Phone : </td><td><input type="tel" ></td></tr>
            <tr><td>Zipcode : </td><td><input type="number" ></td></tr>
            <tr><td>Date of Birth <font color="red">*</font> : </td><td><input type="date" name="email" required></td></tr>
            <tr><td colspan="2">By submitting, I agree that all information entered was done accurately & truthfully.</td></tr>
            <tr><td>I accept <input type="checkbox" id="iaccept"></td></tr>
            <tr><td><input type="submit" name="Submit"></td><td><input type="reset" name="Reset"></td></tr>
        </table>
    </form></center>
    </div>
    <center></center>
    <div id="footer">Copyright &copy; <a href="https://harbingergroup.com"><font color="#00F"><b>Harbinger Group</b></font></a>
</div>
</body>
</html>

Answer 1

load您不需要h1处理程序;它已经装好了。使用$('h1').load(...)表示“在h1加载时执行某些操作（例如，通过AJAX）。”但是这个代码在页面加载后运行，你永远不会重新加载h1，所以代码永远不会运行。

相反，只需直接应用CSS即可。它在$(document).ready(...)中，因此它会在页面加载时运行。这是你如何做到的：

$("h1").css({
     "left": "500px",
     "-webkit-transform":"rotate(360deg)",
     "-webkit-transition": "1s"
});

Working demo on jsFiddle

JQuery焦点事件

1 个答案: