Question

我觉得我有正确的代码才能使它工作，但它只是没有做任何事情。我错过了什么吗？

$(document).ready(function() {
$("h2").addClass("animated bounce");
});

这也是我的HTML。

<head>
<title>Brandon Stranc | Front End Developer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <!-- to scale well with mobile -->

<link rel="stylesheet" type="text/css" href="_css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<!-- <script src="_js/script.js"></script> -->
</head>

<header id="header">
    <div class="overlay">
    <nav>

        <a href="#projects" class="slide-section" title="">Projects</a>

        <a href="#about-me" class="slide-section" title="">About Me</a>

        <a href="#contact" class="slide-section" title="">Contact</a>
    </nav>

    <h2>Front End Developer</h2>
    <h4>Making Websites for BB &hearts;</h4>
    </div>
</header>

Answer 1

在页面
中添加animate.css

$(document).ready(function() {
$("h2").addClass("animated bounce");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<header id="header">
    <div class="overlay">
    <nav>

        <a href="#projects" class="slide-section" title="">Projects</a>

        <a href="#about-me" class="slide-section" title="">About Me</a>

        <a href="#contact" class="slide-section" title="">Contact</a>
    </nav>

    <h2 >Front End Developer</h2>
    <h4>Making Websites for BB &hearts;</h4>
    </div>
</header>

如何使用jQuery添加动画反弹？

1 个答案: