Эффект отказов jQuery не работает с элементами списка, как они должныЗачем? - PullRequest
Новая
       10

Эффект отказов jQuery не работает с элементами списка, как они должныЗачем?

0 голосов
/ 27 марта 2012

Я выглядел высоко и низко, и пробовал все виды вещей, но это просто не будет работать.Я видел эти два SO вопроса и их ответы (которые, по-видимому, работали), но, похоже, не работают для меня:

Эффект отказов jquery нарушает встроенное выравнивание списка

jQuery Bounce In Place

Я хочу, чтобы элементы списка на моем сайте http://web.cs.dal.ca/~webucat/ отказов при нажатии.Это мой HTML: 

            <div id = "links">
                <ul>
                    <li><a href ="index.html" class="tab">Home</a><li>
                    <li><a href ="math.html" class="tab">Learn Math</a><li>
                    <li><a href ="geography.html" class="tab">Learn Geography</a><li>
                    <li><a href ="spelling.html" class="tab">Learn Spelling</a><li>
                    <li><a href ="music.html" class="tab">Learn Music</a><li>
                    <li><a href ="contact.html" class="tab">Contact Teacher</a><li>
                </ul>
            </div>

И мой jQuery: 

$('li a').hover(function () {
    $(this).effect("bounce", { times: 3 }, 300);
})​

Но, похоже, они не работают.

В одном из предыдущих вопросов было сказаносделать элементы списка плавающими влево вместо отображения в строке, что я и сделал, но это все равно не решило проблему.

У меня странное ощущение, что это как-то связано со ссылками на мои скрипты в моем HTML.Правильно ли это сделано? 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
    <script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="javascript/scripts.js"></script>

Я действительно в растерянности относительно того, почему это не сработает.Может ли кто-нибудь помочь?

Редактировать: Я сделал эту скрипку: http://jsfiddle.net/jfHNU/2/ И она работает там, и я не вижу, чем мой код отличается от этого.

Ответы [ 2 ]

1 голос
/ 27 марта 2012

Когда выполняется 

$('li a').hover(function () {
    $(this).effect("bounce", { times: 3 }, 300);
})​

?Возможно, он работает до того, как dom полностью загружен, и поэтому li не существует?

edit: похоже, что он работает до полной загрузки страницы.попробуйте переместить тег сценария в конец страницы и, возможно, обернуть его в документ.

1 голос
/ 27 марта 2012

Вы должны включить jQuery-ui после jQuery, иначе ничего не будет работать 

<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
...