在 Javascript 中加载或单击时不播放动画

Question

正在使用 h1 标签上的动画和单击 h2 标签时的 slideDown 和 slideUp 的小费计算器。问题是，none 的动画正在播放并且点击事件也不起作用。这是 HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tip Calculator</title>
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="midtermcss.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <script src="animationJS.js"></script>
</head>

<body>
    <section id="faqs">
        <h1>Tip facts</h1>
        <h2>Things to know before you tip</h2>
        <div>
            <p>Tips Account for 44 Billion dollars of the Food Industry</p>

            <p>7 States require servers to be paid minimum wage like everyone else</p>
                <ul>
                    <li>Minnessota</li>
                    <li>Montana</li>
                    <li>Washington</li>
                    <li>Oregon</li>
                    <li>California</li>
                    <li>Nevada</li>
                    <li>Alaska</li>
                </ul>
            <p>Current Federal minimum tipped wage is .13 per hour can you live on that?</p>
            <p>Charging with Credit/Debit cards tends to reduce the average tip</p>
        </div>      
    </section>

    <section id="js">
    <h1 id="heading">Tip Calculator</h1>
        <label for="billAmount">Total Amount Of Bill:</label>
        <input type="text" id="billAmount"><br>

        <label for="percentTip">Percent To Tip:</label>
        <input type="text" id="percentTip"><br>

        <label for="amountPeople">How Many People?:</label>
        <input type="text" id="amountPeople"><br>

        <label for="totalTip">Tip Total:</label>
        <input type="text" id="totalTip"><br>

        <label>&nbsp;</label>
        <input  type="button" id="calculate" value="Calculate"><br>
    </section>
</body>
</html>

这是JS文件。

$(document).ready(function() {
    // runs when an h2 heading is clicked
    $("#faqs h2").toggle(
        function() {
            $(this).toggleClass("minus");
            $(this).next().slideDown(1000, "easeOutBounce");
        },
        function() {
            $(this).toggleClass("minus");
            $(this).next().slideUp(1000, "easeInBounce");
        }
    );

    $("#faqs h1").animate({
        fontSize: "400%",
        opacity: 1,
        left: "+=375"
    }, 1000, "easeInExpo")
        .animate({
        fontSize: "175%",
        left: "-=200"
    }, 1000, "easeOutExpo");

    $("#faqs h1").click(function() {
        $(this).animate({
            fontSize: "400%",
            opacity: 1,
            left: "+=375"
        }, 2000, "easeInExpo")
            .animate({
            fontSize: "175%",
            left: 0
        }, 1000, "easeOutExpo");
    });

});


var $ = function(id) {
    return document.getElementById(id);
}
var calculateClick = function() {
    var billAmount = parseFloat($("billAmount").value);
    var percentTip = parseFloat($("percentTip").value);
    var amountPeople = parseInt($("amountPeople").value);

    if (isNaN(billAmount) || billAmount <= 0) {
        alert("Your bill can't be 0 or less.");
    } else if (isNaN(percentTip) || percentTip <= 0) {
        alert("The percentage should be a whole number.");
    } else if (isNaN(amountPeople) || amountPeople <= 0) {
        alert("You are 1 person never count yourself as less.");
    } else {
        var total = billAmount * (percentTip / 100) / amountPeople;
        $("totalTip").value = total.toFixed(2);
    }
}

window.onload = function() {
    $("calculate").onclick = calculateClick;
    $("billAmount").focus();
}

最后但并非最不重要的是 CSS 文件，因为其中列出了 open 和 minus 类

        * {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 500px;
    border: 3px solid blue;
}
section {
    padding: 0 1em .5em;
}
section.js {
    padding: 0 1em .5em;
}
h1 {
    text-align: center;
    margin: .5em 0;
}
label {
    float: left;
    width: 10em;
    text-align: right;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}
#faqs h1 { 
    position: relative;
    left: -168px;
    font-size: 125%;
    color: blue;
}
h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
    cursor: pointer;
    background: url(images/plus.png) no-repeat left center;
}
h2.minus {
    background: url(images/minus.png) no-repeat left center;
}
div.open {
    display: block;
}
ul {
    padding-left: 45px;
}
li {
    padding-bottom: .25em;
}
p {
    padding-bottom: .25em;
    padding-left: 25px;
}

我一辈子都弄不明白为什么动画在一个单独的测试文件中工作，但是当我现在在我的小费计算器中使用它们时它们却不工作。我正在使用 Murach 的 Javascript 和 Jquery 的书，但是这部分非常难以理解。

Answer 1

您的问题是您包含了 jQuery 但后来在全局范围内您重新定义了 $:

var $ = function(id) {
    return document.getElementById(id);
}

Fiddle: http://jsfiddle.net/AtheistP3ace/u0von3g7/

我所做的只是更改保存该函数的变量名，并将其替换到您正在使用它的区域。具体来说：

var getById = function(id) {
    return document.getElementById(id);
}
var calculateClick = function() {
    var billAmount = parseFloat(getById("billAmount").value);
    var percentTip = parseFloat(getById("percentTip").value);
    var amountPeople = parseInt(getById("amountPeople").value);

    if (isNaN(billAmount) || billAmount <= 0) {
        alert("Your bill can't be 0 or less.");
    } else if (isNaN(percentTip) || percentTip <= 0) {
        alert("The percentage should be a whole number.");
    } else if (isNaN(amountPeople) || amountPeople <= 0) {
        alert("You are 1 person never count yourself as less.");
    } else {
        var total = billAmount * (percentTip / 100) / amountPeople;
        getById("totalTip").value = total.toFixed(2);
    }
}

window.onload = function() {
    getById("calculate").onclick = calculateClick;
    getById("billAmount").focus();
}

对于 jQuery，

$ 只是 shorthand。当你包含 jQuery 时，它会为你创建两个功能，它们都做同样的事情。 jQuery 和 $。如果您将 $ 设置为等于其他内容，您实际上已经覆盖了页面中包含的 jQuery 库，它将不再像您期望的那样运行。所有 jQuery 功能都以使用 $ 或 jQuery 函数开始。一旦 returns 给你一个 jQuery 对象，你就可以开始链接和调用这些对象的函数，但是要获得 jQuery 对象，你需要使用 jQuery 或 $函数。

您在上面的评论中提到您的老师让您这样做是为了解决问题。我想这是因为 jQuery 最初没有包括在内，所以他只是创建了 $ 选择器函数来让你感动，但我希望他解释他为什么这样做以及它如何影响以后的事情。

在 Javascript 中加载或单击时不播放动画

Animations not playing on load or on click in Javascript

javascript

javascript-events