Question

我一直在使用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中起作用，但它在实践中并不起作用。

Answer 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也将会关闭。

是的，把你的代码放在pageload之后

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

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

Answer 3

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 );
    });
});

Jquery Transit不工作

3 个答案: