Почему переключатель() не работает?

У меня jsFiddle работает, как я хочу: http://jsfiddle.net/6wuUc/64/Почему переключатель() не работает?

Но по какой-то причине, когда я использую тот же код, я не получаю анимацию при нажатии на кнопку. Вот код, который я использую на своей странице.

<!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8"> 

<link rel="stylesheet" href="_/css/style.css"> 

<script src="_/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script> 
    $('.sv_play_button').toggle(function(){ 
     $('#video').animate({left: '346'}, "fast"); 
    },function(){ 
     $('#video').animate({left: '0'}, "fast"); 
    }); 
</script> 

</head> 

<body> 

<div id="video"> 
    <div class="sublime"> 
     <p class="sv_play_button">Click</p> 
    </div>  
</div> 

</body> 
</html>

И CSS:

#video, #video .sv_play_button {position: absolute;} 

#video { margin-left: -346px; width: 670px; height: 546px; background-color: blue;} 

.sublime { width: 1016px; height: 546px; background-color: red; opacity: 0.8; } 

.sv_play_button {padding: 5px; background-color: yellow; top: 0px; right:0px; }

Кто есть какие-либо идеи, почему тумблер() не работает на моей странице? Заранее спасибо.

источник

2012-05-03 realph

Проблема

Вы не обернутый свой JQuery в $(document).ready(), который требуется для выполнения каких-либо Jquery события.

Что такое hapenning, так это то, что javascript пытается запустить jquery-код до того, как jquery уже загружен, поэтому вы должны подождать, пока документ не будет загружен (с использованием .ready()).

Ваш новый Javascript должен выглядеть следующим образом:

$(document).ready(function() { 
$('.sv_play_button').toggle(function(){ 
     $('#video').animate({left: '346'}, "fast"); 
    },function(){ 
     $('#video').animate({left: '0'}, "fast"); 
    }); 
});

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

, если вы не имеете его ссылка уже, вам нужно будет ссылаться на JQuery в вашей голове, как так:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Ссылки

$(document).ready()

источник

2012-05-03 01:24:03

Хорошо, я должен делать что-то неправильно. Я создал связанный файл functions.js с моей страницей и поместил мой jquery в блок $ (document) .ready() в файле функций. Все еще не работает. – realph

Вы пытались не помещать его во внешний источник? –

Да, я попытался поставить перед тегом закрывающего тела, как вы показали. – realph

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

оберните свою функцию в готовый блок документа, и все должно быть установлено.

jQuery(function(){ 
    your code here 
})

ссылка: http://api.jquery.com/jQuery/#jQuery3

~~тумблер также оленья кожа поддерживает путь вы призывающую его. http://api.jquery.com/toggle/~~

Вы не можете передавать две функции (насколько я могу судить), поскольку переключатель только показывает или скрывает элемент. EDIT: MagicDev указывает на toggle event api

источник

2012-05-03 01:22:47

на самом деле .toggle * can * можно использовать, что он пытается сделать, прочитайте http://api.jquery.com/toggle-event/ –

Спасибо за ссылку @MagicDev. Не знал об этом ярлыке. –

Спасибо за предложение, но я все еще не могу заставить его работать. Любая идея почему? – realph

You также может просто переместить ваш скрипт в нижнюю часть вашей страницы прямо над </body> t аги.

... 
<script> 
    $('.sv_play_button').toggle(function(){ 
     $('#video').animate({left: '346'}, "fast"); 
    },function(){ 
     $('#video').animate({left: '0'}, "fast"); 
    }); 
</script> 
</body>

источник

2012-05-03 01:42:28 Fostah

Вы не завернули свой jquery в $ (документе).ready(), который требуется для запуска любых событий jquery.

источник

2015-07-27 09:58:01 ammy

Почему переключатель() не работает?

ответ

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