Fade in/Out div с Javascript

Итак, у меня есть javascript для сайта, но в настоящий момент единственный способ заставить его работать, если он смешивается с HTML. Я читал, что это плохая практика, но я не могу понять, как заставить ее работать как скрипт в разделе главы. Может кто-нибудь мне помочь? Я прочитал здесь несколько подобных вопросов, но не могу заставить его работать.Fade in/Out div с Javascript

Спасибо, Alex

Вот код, у меня есть:

<li><a href="#" class="about_button" onclick="$('.about_background, .about_close').fadeIn('fast') ">About</a></li>

Я тогда угасание его снова, добавив:

<a href="#" class="about_close" onclick="$('.about_background').fadeOut('fast')"></a>

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

Благодаря

источник

2013-06-09 Alex Delis

Что вы положить в ? – user887515

, так что нормально смешивать его с HTML? –

В вашем HTML вы можете разместить элементы:

<li><a href="#" class="about_button">About</a></li> 
<a href="#" class="about_close"></a>

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

<script src="<file path>"></script>

Во внешнем JS файл, который вы можете связать обработчик события к ним:

$(".about_button").click(function(){ 
    $('.about_background, .about_close').fadeIn('fast') 
} 
$(".about_close").click(function(){ 
    $('.about_background').fadeOut('fast') 
}

источник

2013-06-09 11:49:26

приятно объяснил, спасибо –

, что весь код, который я должен написать в файле .js? –

@AlexDelis да, это должно работать само по себе, если вы положите его на дно области тела. Если вы поместите его в заголовок, вам придется его обернуть в документе.чтобы убедиться, что элементы dom загружены, прежде чем пытаться привязать к ним обработчики кликов. Это выглядело бы как-то как ответ I3B13 –

Использование

<script src="path/to/file.js"></script>

В HTML 5 вам не нужно указывать тип, иначе вам нужно указать тип = "текст/JavaScript"

источник

2013-06-09 11:48:42 veelen

ah ok, поэтому я прекрасно смешиваю его с HTML, если он помещен в файл .js и связывает его? –

Извините, если это звучит глупо. –

Если ваш javascript/jQuery работает, то это вам действительно нужно. – veelen

Использование JQuery селекторы для ориентации HTML-элементы и разместить на них слушателей:

$('.about_button').on('click', function() { 
    $('.about_background, .about_close').fadeIn('fast') 
})

$('.about_button') is t он селектор, который вы используете для таргетинга на элемент. on('click' устанавливает OnClick слушателя на целевом элементе function() { ... } функция обратного вызова, которая будет вызываться, когда слушатель получает вызвал

источник

2013-06-09 11:48:46 rednaw

Я думаю, что вы просто забыли использовать документ готов.

код вам нужно:

<head> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.about_button').click(function(){ $('.about_background, .about_close').fadeIn('fast'); }); 
     $('.about_close').click(function(){ $('.about_background').fadeOut('fast'); }); 
    }); 
    </script> 
</head>

источник

2013-06-09 11:54:11 Nergal

Это работает, но он действительно должен идеально быть во внешнем файле, а не только в теге скрипта. И если вы поместите скрипт в конец тела, а не в голову, document.ready не нужен. –

Fade in/Out div с Javascript

ответ

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