logo标签列表

如何使用jQuery添加一个弹跳动画？

jqueryhtmlanimation
5

我感觉我的代码应该是正确的，但它却没有任何反应。我是否漏掉了什么？

$(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>
你能创建一个 JSFiddle 吗？ - Berkay Yaylacı
如果您喜欢 CSS Bounce。 - Abhi
2个回答
5
在页面中添加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>

0

我认为这是由于动画弹跳的类名出现了问题。 当我进行了一些研究后，我发现了 animate.style 网站，他们提供了一些实现弹跳动画的方法。

这是我实现它的解决方案。

<head>
<!--Add this to the head element-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<!--Make sure that you have the scripts to jquery -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


</head>

我添加了 .addClass() 函数，使用 animate__animated 和 animate__bounce 类名来分配给 h2。
https://codepen.io/rodrigo-lopez/pen/MWGepmV
希望这可以帮到你。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接