Jquery Transit не работает

Я поигрался с плагином jquery Jquery Transit: http://ricostacruz.com/jquery.transit/ но что бы я ни делал, код не ведет себя так, как я ожидаю (на самом деле, это не ведет себя вообще)

 <!DOCTYPE html>
<html>
<head>
  <style>
  div {
background-color:yellow;
width:100px;
border:1px solid blue;
position:absolute;
left:50px;
}

</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script scr='jquery.transit.js'></script>
</head>

<title>test</title>
</head><body>
 <button id="go"> Run</button>
<div id="block">Hello!</div>

    <script>
$(function() {
    $("#go").click(
function(){
 $("#block").transition({ x: '90px' }, 1500 );
});
});
</script>
</body>
</html>

Код не работает вообще. Для сравнения я добавил код анимации jquery, который прекрасно работает. Теперь я ЗНАЮ, что jquery 1.8 нарушил транзит jquery, но я использую здесь jquery 1.7, так что это не должно быть проблемой.

Я в недоумении, у кого-нибудь есть идеи?

РЕДАКТИРОВАТЬ:

Я следовал всем инструкциям и создал это: http://web.uvic.ca/~markkoni/ и хотя примеры, похоже, работают jsfiddle, на практике это не работает.

Источник

3 ответа

Решение

Рабочая демонстрация (также протестирована на localhost): http://jsfiddle.net/fedmich/S2ube/

минимизированный скрипт, кажется, не работает. измени свой код с

http://ricostacruz.com/jquery.transit/jquery.transit.min.js

в

http://ricostacruz.com/jquery.transit/jquery.transit.js

также не делайте прямой ссылки на javascript и не размещайте его на своем собственном сайте, потому что, когда его сайт будет недоступен позже, ваш web_app также будет недоступен, если вы используете js его сайта.

и да, поставьте свой код после загрузки страницы

$(function() {
    //your code here
});
Источник

Transit поддерживает backgroundColor и свойства цвета. Посмотрите пример: http://jsfiddle.net/PAnCh/

$(function() {
    $("#block").mouseenter(
    function(){
        $("#block").transition({ x: '+=90px', backgroundColor: '#cacaca', color: '#000' }, 1000 );
    });

    $("#block").mouseleave(
    function(){
         $("#block").transition({ x: '-=90px', backgroundColor: '#036', color: '#fff'  }, 500 );
    });
});
Источник

Сделайте так, чтобы ваш DOM загружался, прежде чем манипулировать им, заключив его в готовый обработчик jQuery:

$(function(){
    $('#go').click(function(){
        $("#block").transition({x: '90px'}, 1500);
    });
});​

Также предпочитаю использовать css left собственность вместо x который не существует.

div {    
    background-color: yellow;
    width: 100px;
    border: 1px solid blue;
    position: absolute;
    left: 50px;
}

Вот рабочая скрипка

Также убедитесь, что ваш скрипт скрипт выглядит так:

<script type="text/javascript">

Вместо

<script>

Заметки:

Я использую jQuery 1.7.2 в своей скрипке, кажется, что транзит еще не совместим с tran.js.

Источник
Другие вопросы по тегам