jQuery-在动画中使用easyOutBounce不起作用

Question

I try to animate a div with a easeOutBounce effect when the page load, but is not working for me. 当页面加载时，我尝试使用easyOutBounce效果为div设置动画，但不适用于我。

I have referenced the jQuery UI. 我已经引用了jQuery UI。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

My jQuery code: 我的jQuery代码：

$(document).ready(function() {
    $(".content").animate({marginTop: "-=50px"},1000,'easeOutBounce');
});

My html code: 我的html代码：

<div class="content">
    <h3>Titulo h3</h3>
    <p>Este texto lleva una animacion lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla urna, consequat nec erat bibendum, ullamcorper fermentum ligula.</p>
    <img width="50%" src="Images/javascript-movimiento.png" alt="animationJS" />
 </div>

Answer 1

This works in Chrome - I see the title and the para, then very quickly the para slides up to the top with a pleasing bounce. 这在Chrome中有效-我看到了标题和段落，然后段落很快就弹起并跳到顶部。 Please confirm it works for you too and if so check you HTML for typos. 请确认它也对您有效，如果是，请检查HTML是否有错字。

<!DOCTYPE HTML>
<html>
<head>
</head>
 <body >

 <div class="content">
    <h3>Titulo h3</h3>
    <p>Este texto lleva una animacion lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla urna, consequat nec erat bibendum, ullamcorper fermentum ligula.</p>
    <img width="50%" src="Images/javascript-movimiento.png" alt="animationJS" />
</div>

</body>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    $(document).ready(function() {
        $(".content").animate({marginTop: "-=50px"},1000,'easeOutBounce');
    });
 </script>

 </html>

jQuery-在动画中使用easyOutBounce不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-11-08 11:57:25

jQuery-在动画中使用easyOutBounce不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-11-08 11:57:25

解决方案1
0 已采纳 2016-11-08 11:57:25