Jquery Transit不能正常工作

我一直在玩jquery插件Jquery Transit：http://ricostacruz.com/jquery.transit/但无论我做什么，代码的行为都不像我预期的那样（事实上，它不会表现根本）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它在实践中行不通。

来源

2012-11-21 genuinelycurious

用$（function {code}）关闭您的单击事件调度程序; –

我编辑了我的答案，您的脚本标记不正确。 – rayfranco

Marcin，您输入了错误的scr =“”http://i.imgur.com/wbuxm.png使用记事本++或其他颜色为hilight的IDE，因此您会看到是否存在语法问题 – fedmich

工作演示（测试本地主机太）：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 
});

来源

2012-11-21 23:28:02 fedmich

对不起，我删除了评论，它是一个问题与我的网络不加载https资源。对于那个很抱歉。 – rayfranco

啊是的，他的网站之前也有点下降，因此我建议不要从他的网站上热链接 – fedmich

当我在jsfiddle上这么做的时候，它可以工作......但是当我进行测试时，它并没有出于某种原因。这是我做的：http://web.uvic.ca/~markkoni/ – genuinelycurious

制作河畔后您的DOM操作之前，加载在一个jQuery ready handler括起来：

$(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。

来源

2012-11-21 23:50:30 rayfranco

ray，你链接到你的jsfiddle – fedmich

@fedmich耶，谢谢:) – rayfranco

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-06 10:34:09 Plasebo

Jquery Transit不能正常工作

回答

相关问题