X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> JQuery
errload
errload
Topic Starter сообщение 15.6.2012, 16:49; Ответить: errload
Сообщение #1


Привет народ, такая вот незадачка....
Есть 2 блока, и ссылка, по нажатии которой она заменяет один блок на другой..
Блоки:
[CSS]
#about {
width: 100%;
height: 100px;
background: #000080;
display: none;
}
#contact {
width: 100%;
height: 100px;
background: #BB0000;
display: none;
}
[/CSS]
Сам скрипт:
[JS]
function aboutLink() {
$('#contact').fadeOut(500);
$('#about').delay(800).fadeIn(500);
}
[/JS]
Собственно, сама проблема: все работает отлично, но если нажать сразу пару раз на ссылку, то заменяющий блок становится ниже и ждет очереди (500мс), пока первый не исчезнет.. И только потом подвигается наверх на его место.. Подскажите, кто знает, как это решить? Заранее благодарен....
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LeeSwagger
LeeSwagger
сообщение 15.6.2012, 18:40; Ответить: LeeSwagger
Сообщение #2


Не пойму что за браузер?
Я потестил, всё норм!

Вот код страницы:

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>template - width 1024 center</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<style>
#about {
width: 100%;
height: 100px;
background: #000080;
display: none;
}
#contact {
width: 100%;
height: 100px;
background: #BB0000;
display: block;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
function aboutLink() {
$('#contact').fadeOut(500);
$('#about').delay(800).fadeIn(500);
}
</script>
</head>

<body>
<div id="about" >123</div>
<div id="contact">567</div>
<a href="javascript:void(0)" onclick='aboutLink()'>Click me</a>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
cyber_ua
cyber_ua
сообщение 15.6.2012, 19:02; Ответить: cyber_ua
Сообщение #3


(LeeSwagger @ 15.6.2012, 21:40) *
Не пойму что за браузер?
Я потестил, всё норм!

Вот код страницы:

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>template - width 1024 center</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<style>
#about {
width: 100%;
height: 100px;
background: #000080;
display: none;
}
#contact {
width: 100%;
height: 100px;
background: #BB0000;
display: block;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
function aboutLink() {
$('#contact').fadeOut(500);
$('#about').delay(800).fadeIn(500);
}
</script>
</head>

<body>
<div id="about" >123</div>
<div id="contact">567</div>
<a href="javascript:void(0)" onclick='aboutLink()'>Click me</a>
</body>
</html>


во первых этот вообще работать не будет.
поправить так нужно
<a href="Javascript<b></b>:void(0)" onclick='aboutLink();return false;'>Click me</a>

во вторых он срабатывает только один раз.

и втретьих браузер ставит события в очередь и как только выполняется предыдущие , вызывается следущие в очереди
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
cyber_ua
cyber_ua
сообщение 15.6.2012, 19:07; Ответить: cyber_ua
Сообщение #4


если вам не нужно чтобы onclick выполнялся пока анимация в процессе то :
нужно его сбрасывать на время выполнения функции , а потом снова устанавливать!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
errload
errload
Topic Starter сообщение 15.6.2012, 19:11; Ответить: errload
Сообщение #5


(LeeSwagger @ 15.6.2012, 21:40) *
Не пойму что за браузер?

Проверял в IE, Chrome и Opera, везде одинаково работает.....
Ок, вот полный код:
<html>
<head>
<title>site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<a href="javascript:aboutLink();" id="aboutMenu">about</a> |
<a href="javascript:contactLink();" id="contactMenu">contact</a> | <a href="javascript:createMenu();" id="createMenu">create</a>

<style>
#create {
width: 100%;
height: 100px;
display: none;
border: 1px solid black;
}
#about {
width: 100%;
height: 100px;
display: none;
border: 1px solid black;
}
#contact {
width: 100%;
height: 390px;
display: none;
border: 1px solid black;
}
</style>

<script>
function aboutLink() {
if(document.getElementById("create")) {
$('#create').fadeOut(200);
$('#about').delay(200).fadeIn(200);
}
if(document.getElementById("contact")) {
$('#contact').fadeOut(200);
$('#about').delay(200).fadeIn(200);
}
}

function contactLink() {
if(document.getElementById("about")) {
$('#about').fadeOut(200);
$('#contact').delay(200).fadeIn(200);
}
if(document.getElementById("create")) {
$('#create').fadeOut(200);
$('#contact').delay(200).fadeIn(200);
}
}

function createMenu() {
if(document.getElementById("about")) {
$('#about').fadeOut(200);
$('#create').delay(200).fadeIn(200);
}
if(document.getElementById("contact")) {
$('#contact').fadeOut(200);
$('#create').delay(200).fadeIn(200);
}
}
</script>
<div id="create">
create
</div>

<div id="about">
about
</div>

<div id="contact">
contact
</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
cyber_ua
cyber_ua
сообщение 15.6.2012, 19:16; Ответить: cyber_ua
Сообщение #6


(errload @ 15.6.2012, 22:11) *
<a href="javascript<b></b>:aboutLink();" id="aboutMenu">about</a>

хоть убейте , но у меня это не работает...
работает только если добавить
[JS]onclick ="aboutLink();return false;" [/JS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
errload
errload
Topic Starter сообщение 15.6.2012, 19:17; Ответить: errload
Сообщение #7


Вот это
(cyber_ua @ 15.6.2012, 22:16) *
<b></b>

автоматически добавляется после слова javascript на этом форуме....
Нужно просто удалить эти теги в ссылках...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
cyber_ua
cyber_ua
сообщение 15.6.2012, 19:20; Ответить: cyber_ua
Сообщение #8


(errload @ 15.6.2012, 22:17) *
автоматически добавляется после слова javascript на этом форуме....
Нужно просто удалить эти теги в ссылках...

ахах , а я думаю что то не так в этой конструкции=)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Muxa_hb
Muxa_hb
сообщение 15.6.2012, 19:21; Ответить: Muxa_hb
Сообщение #9


(cyber_ua @ 15.6.2012, 22:20) *
ахах , а я думаю что то не так в этой конструкции=)

я уже тоже с этим столкнулся)) причем если нажать редактировать сообщение - то отображается нормально все, без всяких там.. видимо фильтр стоит такой))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
errload
errload
Topic Starter сообщение 15.6.2012, 19:25; Ответить: errload
Сообщение #10


Ну вы прикололись с моего скрипта? Если несколько раз щелкнуть по одной и той же ссылке когда стоит другой блок, новый появляется снизу пока старый еще не ушел.. А потом поднимается наверх... Как это убрать? 2 дня уже мучаюсь...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
0 alexey 1169 24.11.2023, 14:46
автор: alexey
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44761 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) 1C-Bitrix, JavaScript\jQuery, Верстка HTML5 CSS3
1 byteeightlab 1458 2.7.2019, 7:37
автор: ychervov
Открытая тема (нет новых ответов) Недорогие услуги - php/js/mysql/jquery/bootstrap
2 vlads 3793 25.12.2017, 21:18
автор: xetedata
Открытая тема (нет новых ответов) Frontend услуги (верстка, подключение jquery плагинов, кастомизация, написание скриптов)
услуги по frontend-разработке
15 FrontMaster 9987 25.11.2017, 13:46
автор: Stom


 



RSS Текстовая версия Сейчас: 28.3.2024, 19:40
Дизайн