Question

我尝试在页面加载时使用easeOutBounce效果为div设置动画，但对我不起作用。

我引用了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>

我的jQuery代码：

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

我的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

这适用于Chrome - 我看到了标题和para，然后非常快速地将para滑到顶部并带来令人愉悦的反弹。请确认它也适合您，如果是这样，请检查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 - 在动画中使用easeOutBounce Not Work

1 个答案: