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不能正常工作

回答

相關問題