Jquery Transit 不工作答案

【问题标题】：Jquery Transit Not workingJquery Transit 不工作
【发布时间】：2012-11-21 23:21:59
【问题描述】：

我一直在玩 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 transit，但我在这里使用的是 jquery 1.7，所以这应该不是问题。

我在这里不知所措，有人有什么想法吗？

编辑：

我已按照每个人的指示创建了这个： http://web.uvic.ca/~markkoni/ 尽管这些示例似乎对 jsfiddle 有效，但在实践中却行不通。

【问题讨论】：

用 $(function{ code }); 关闭你的点击事件调度器；
我已经编辑了我的答案，你的脚本标签不正确。
Marcin，你输入了错误的 scr="" i.imgur.com/wbuxm.png 使用 notepad++ 或其他颜色高亮的 IDE，所以你会看看是否有语法问题

标签： javascript jquery jquery-animate transition jquery-transit

【解决方案1】：

工作演示（也在 localhost 上测试过）：http://jsfiddle.net/fedmich/S2ube/

缩小的脚本似乎不起作用。更改您的代码

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

到

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

也不要直接把javascript热链接放到你自己的网站上，因为以后他的网站宕机了，你用他网站的js你的web_app也会宕机。

是的，把你的代码放在页面加载之后

$(function() {
    //your code here
});

【讨论】：

对不起，我删除了评论，这是我的网络没有加载 https 资源的问题。对此感到抱歉。
啊，是的，他的网站以前也有点低，所以我建议不要从他的网站上盗链
当我在 jsfiddle 上执行此操作时，它可以工作......但是当我进行测试时，由于某种原因它不会。这是我所做的：web.uvic.ca/~markkoni
i.imgur.com/wbuxm.png 使用 notepad++ 或其他 IDE 的颜色高亮，这样你会看到是否有语法问题
哦，天哪，我一定是阅读障碍。非常感谢！

【解决方案2】：

通过将 DOM 封装在 jQuery ready handler 中来确保在操作之前加载您的 DOM：

$(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;
}

这里是a working fiddle

还要确保你的脚本标签看起来像这样：

<script type="text/javascript">

代替

<script>

注意事项：

我在我的小提琴中使用jQuery 1.7.2，看来transit is not compatible with transit.js 还没有。

【讨论】：

【解决方案3】：

Transit 支持 backgroundColor 和 color 属性。查看示例：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 );
    });
});

【讨论】：