Использование jsAnim.js

Question

Я пытался настроить базовую тестовую анимацию, используя jsanim.js и используя их пример сайта для настройки моих html, css и js. Тем не менее, я просто не могу понять это (не разработчик ... дизайнер!), И не просто загрузить файл HTML, CSS, JS, показывающий, как сказать анимировать DIV слева направо.

Примеры того, как работает библиотека, понятны, но мне чего-то не хватает в настройке, и я смотрю на их источник на сайте, это чокнутый ... слишком много всего происходит.

Спасибо всем, кто имеет опыт работы с jsAnim.js http://www.jsanim.com

Best

Mark

Answer 1

поместите этот скрипт в заголовок.

<script>
function doAnimation(){
var manager = new jsAnimManager(40);
myObject = document.getElementById("box");   
var anim = manager.createAnimObject("box"); 
anim.add({property: Prop.width, from: 50, to: 500, duration: 2000});
}
</script>

В вашем html поместите div с идентификатором "box". И кнопка для запуска функции.

<div id="box"></div>
<button onclick="doAnimation()">animate</button>

Я обнаружил, что jsAnim может быть в паре с jQuery, но после более внимательного изучения все это казалось недостаточно разработанным и немного избыточным. Я делаю большинство своих анимаций в jQuery, и если мне нужно анимировать на Безье или дуге, я использовал плагин Weepy .

Да, и не забудьте указать путь к вашему файлу jsAnim в заголовке.

Answer 2

У меня были проблемы с этим

Вам нужно убедиться, что div, который вы пытаетесь анимировать, загружен на страницу, прежде чем javascript попытается его оживить

<div id="divToAnimate"> 
</div>

<script language="javascript">
    var manager = new jsAnimManager(40); 
    etc......
</script>

В противном случае это не сработает.