jQuery - Использование easeOutBounce в анимации Не работает

Я пытаюсь анимировать div с эффектом easeOutBounce при загрузке страницы, но не работает для меня.jQuery - Использование easeOutBounce в анимации Не работает

Я ссылался на пользовательский интерфейс jQuery.

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

источник

2016-11-08 user3465849

Я думаю, нам нужно будет увидеть еще какой-нибудь контекст для элемента .content. Например, у вас может быть что-то такое же простое, как опечатка в имени класса. –

@VanquishedWombat Я добавляю html-код в главный вопрос || Если я не добавлю «easeOutBounce», функция работает правильно, но если я добавлю это, функция не сработает ... – user3465849

Это работает в Chrome - я вижу заголовок и пункт, а затем очень быстро пара скользит до верх с приятным отскоком. Пожалуйста, подтвердите, что это работает и для вас, и если да, то проверьте 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>

источник

2016-11-08 11:57:25

Теперь это работает! Я присвоил margin-top: 50px для класса content, это была проблема ... но я не понимаю, почему ... – user3465849

В каком браузере вы видите это поведение? –

Я использую Chrome – user3465849

jQuery - Использование easeOutBounce в анимации Не работает

ответ

Смежные вопросы