2013-03-12 135 views
0
工作工程

要去瘋狂這個現在...簡單的jQuery動畫不上的jsfiddle

我試圖獲取上的jsfiddle工作動畫工作本地/ FTP,但沒有任何反應。

我有包括ALL這個庫的

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

我可以運行具有的功能$(this).hide(動畫...但正如我告訴,而不是生命的FUNC。

這是我正在使用的腳本。

$(".wrapper").mouseenter(function() { 
    $(this).animate({ 
     left: -1*$(".leftbox").width() 
    }, 500); 
}); 

$(".wrapper").mouseleave(function() { 
    $(this).animate({ 
     left: "0px" 
    }, 500); 
}); 

這裏是jsFiddle,我複製粘貼到我的索引頁面。不改變任何東西。 http://jsfiddle.net/ewNpL/1/

+1

究竟是什麼不能正確執行?當我用chrome查看它時,它會滑動到鼠標懸停的「顯示內容」部分,當我將鼠標移出時,它會返回。這不是你想要的嗎? – 2013-03-12 18:28:31

+2

嘗試在像'$(function(){//您的代碼})一樣準備處理程序中包裝ur代碼;' – Rafay 2013-03-12 18:28:47

+0

您的瀏覽器的名稱和版本是什麼? – 2013-03-12 18:29:09

回答

1

發佈從評論的答案:

嘗試包裝你所有的JS/jQuery代碼就緒處理程序中像

$(function(){ 
$(".wrapper").mouseenter(function() { 
    $(this).animate({ 
     left: -1*$(".leftbox").width() 
    }, 500); 
}); 

$(".wrapper").mouseleave(function() { 
    $(this).animate({ 
     left: "0px" 
    }, 500); 
}); 

}); 

建議使用現成的處理程序,這樣的JavaScript開始前顯示它的魔法DOM應該準備好,出於同樣的原因,它建議在標記之後模擬所有腳本部分。

爲什麼你的代碼在小提琴中運行良好?因爲默認情況下,jsfiddle會將腳本部分包裝在ready處理程序中....

+0

謝謝你,我的朋友。這真的很有幫助。 – Dymond 2013-03-12 18:57:51