2013-10-03 3 views
0

Хорошо, я знаю, что в этом есть справедливое количество этих потоков, и я пробовал много решений, но я не могу, чтобы жизнь меня казалась чтобы мой jQuery работал. Я уверен, что правильно связал его, и я не вижу никаких явных ошибок в моем коде (хотя я довольно новичок в этом), и это немного расстраивает.Я не могу получить jQuery для работы

Я создал несколько div с классом под названием «button», и я пытаюсь сделать так, чтобы, когда вы наводите на них курсор, они становятся полупрозрачными, а когда вы их оставляете, вернуться к нормальной жизни. Однако по какой-то причине он, похоже, не работает.

Во всяком случае, вот соответствующая часть моего HTML:

<head> 
<title>Testing</title> 
<link rel="stylesheet" type="text/css" href="main.css"/> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="script.js"></script> 
</head> 

И мой JQuery код:

$(document).ready(function(){ 
    $(".button").mouseenter(function(){ 
     $(this).fadeTo("slow", 0.5); 
    }); 
    $(".button").mouseleave(function(){ 
    $(this).fadeTo("slow", 1); 
    }); 
}); 

И мой CSS, для хорошей мерой (на всякий случай):

.button { 
height:50px; 
width:150px; 
border-radius:5px; 
background-color:#C7C7C7; 
border:2px solid black; 
display:inline-block; 
text-align:center; 
font-size:26px; 
line-height:50px; 
margin-bottom:5px; 
} 
+2

Работы здесь http://jsfiddle.net/DLXxE/ – Johan

+0

ошибки консоли ? Пробовал ли что-нибудь? – Dave

+0

Работает здесь: http://jsfiddle.net/CS6Qp/. –

ответ

3

Если вы не используете какой-либо сервер и тестируете только локально, ваша проблема может быть связана с этой строкой:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

Попробуйте изменить его:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

Обратите внимание на добавление HTTP: //

Почему? Вы можете прочитать в этой статье о обезглавленный CDN, но если вы не используете веб-сервер локально, то вы должны включать в себя HTTP: //

http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/#protocolless

Главное предостережение, чтобы иметь в виду при использовании ссылка без протокола заключается в том, что она не удалась на страницах, загружаемых через файл: /// (т. е. страницы HTML, которые вы загружаете с диска в браузер) . Поэтому не забудьте включить в URL-адрес http: protocol, если вы вообще не работаете без веб-сервера , но не беспокойтесь о том, чтобы его опустить.

+0

Ничего себе, спасибо за быстрый ответ - мой пост был едва поднят на 5 минут. Я попробовал ваше предложение и сумел заставить его работать в Internet Explorer, но не по какой-то причине Chrome. – user2844107

+0

Не знаете, почему это было занижено; это проблема, с которой я тоже сталкивался (и может быть проблемой здесь, но не может быть уверен без дополнительной информации). Это потому, что в противном случае файл: // выбран как протокол при запуске локально. – Dave

+0

. Я добавил больше контекста относительно безголового CDN без веб-сервера для downvoter, надеюсь, что это изменит их разум :) – kunalbhat

0

Вам не хватает стилей jQueryUI. Попробуйте это:

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
</head> 

Обратите внимание на последний один (который технически должен быть вторым, но легче заметить этот путь ...)

Смежные вопросы