jQuery的效應的jsfiddle工作，但不是在離線/在線

-5

您好我一直有大約4個月這個問題，現在我放棄了在第一，但現在我必須解決這個問題我試圖做一個放大作用，對懸停和我做了所有的代碼，它的工作正常，但是當我複製它並將其粘貼到編輯器中或像代碼它自我不起作用我試過Firefox（最新版本）和谷歌鉻（也是最新版本），但仍然沒有效果偏偏不信邪，也是我嘗試使用谷歌的CDM，也試圖從網站本身沒有什麼下載了jQuery制定了，請幫助我，我只是在編碼初學者謝謝jQuery的效應的jsfiddle工作，但不是在離線/在線

我的HTML：

<html> 
<head> 
    <title>Random Page</title> 
    <link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all"> 
</head> 
<body> 
    <img src="RandomPage.png"> 

    <p style="margin-right:220px; margin-top:20px; float:right; font-size:22px; font-family:century gothic; id="nav2" ">I <a id="nav" href="">HOME</a> I <a id="nav" href="">Apple</a> I <a id="nav" href="">Android</a> I <a id="nav" href="">Gaming</a> I <a id="nav" href="">Random Tech</a> I <a id="nav" href="">About Us</a> I </p> 

    <div id="menu"> 
     <img style=" margin-top:10px; margin-left:10px; border-radius:4px; " src="RandomGaming.png" class="resizableImage"> 
     <img style=" margin-top:10px; border-radius:4px;" src="RandomFashion.png" class="resizableImage"> 
    </div> 
</body>

我的腳本：

$(document).ready(function(){ 
$('.resizableImage').mouseenter(function() { 
$(this).stop().animate({ width: "+=10%", height: "+=10%" }); 
}); 

$('.resizableImage').mouseleave(function() { 
var x = $(this).attr('width'), 
    y = $(this).attr('height'); 

$(this).stop().animate({ width: x, height: y }); 
}); 
});

預先感謝您

來源

2013-11-21 YazTheGreat

可能的重複[爲什麼它在jsfidde但不在我的瀏覽器？]（http://stackoverflow.com/questions/8234545/why-does-it-work-in-jsfidde-but-not-on -my-browser） – putvande

這裏沒有足夠的信息可以幫助你的網站。我猜想它可能是1）文件路徑/ url問題，2）加載順序，或者3）編輯器剝離代碼。 – isherwood

它看起來像你是不是在你的 – Huangism

你需要添加jQuery庫，它必須是你添加的第一件事。

粘貼此<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>在你的腦袋標籤，並確保它的存在的第一個腳本。

來源

2013-11-21 21:42:47 Doge

的第一個腳本有...不是的第一件事...... –

我知道意思那個，但我建議把所有的圖書館等放在一個地方 - 在最上面。呃，無論如何，我添加了它 – Doge

推薦？你錯了。如果JS腳本包含在關閉函數上方的標籤之前，它會更加高效並且可以讓頁面加載速度更快。 –

你的樣本HTML不包括jQuery的。

來源

2013-11-21 21:33:45

將下面的腳本放在腳本下面。您的交易</body>標記之前JUST

<head> 
    <title>Random Page</title> 
    <link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <!-- include future js scripts here --> 
</head>

然後，添加jQuery代碼，像這樣：所以liek這

<script> 
$(document).ready(function(){ 

    $('.resizableImage').mouseenter(function() { 
     $(this).stop().animate({ width: "+=10%", height: "+=10%" }); 
    }); 

    $('.resizableImage').mouseleave(function() { 
     var x = $(this).attr('width'), 
     y = $(this).attr('height'); 

     $(this).stop().animate({ width: x, height: y }); 
    }); 

}); 
</script>

注：它的效率更高，並允許如果您的網頁加載速度就越快JS腳本包含在函數上方的結束標記之前..但爲了簡單起見，我將它包含在<head>中，這也不錯。

來源

2013-11-21 21:49:22

Can你解釋爲什麼一個人必須在'頭部'，另一個在'body'的末尾？ – putvande

兩者都可以工作。但是，瀏覽器會停止渲染頁面，直到每個JavaScript代碼塊都被執行完畢。對於小的JavaScript塊，這不是一個大問題。但是，對於大型圖書館來說，頁面加載時間可能會大幅增加。 –

是的，因此，特別是應該在關閉「body」標籤之前添加庫，而不是在頭部。 – putvande

jQuery的效應的jsfiddle工作，但不是在離線/在線

回答

相關問題