3

我一直在玩 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 有效，但在实践中却行不通。

4

3 回答 3

2

工作演示（也在本地主机上测试）：http: //jsfiddle.net/fedmich/S2ube/

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

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

到

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

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

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

$(function() {
    //your code here
});
于 2012-11-21T23:28:02.977 回答
1

通过将 DOM 封装在jQuery 就绪处理程序中，确保在操作之前加载您的 DOM ：

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

此外，更喜欢使用 cssleft属性而不是x不存在的属性。

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

这是一个工作小提琴

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

<script type="text/javascript">

代替

<script>

备注：

我在我的小提琴中使用jQuery 1.7.2，看来transit 与transit.js 不兼容。

于 2012-11-21T23:50:30.837 回答
1

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 );
    });
});
于 2013-04-06T10:34:09.107 回答