При наведении - показать, при нажатии зафиксировать

Если Вы совсем новичок и слабо представляете себе возможности jQuery, не можете понять в каком форуме задать свой вопрос - Вам сюда.

Модераторы: TRAHOMOTO, tuareg, Gennady

При наведении - показать, при нажатии зафиксировать

Сообщение Анастасия » 26 ноя 2011, 10:09

Доброго время суток) задача заключается в следующем: при наведении на блок - сверху показывается подсказка (соответственно - если мышь не в поле его действии - скрывается), если пользователь нажимает на этот же самый блок - он появляется (фиксируется и можно в нем делать все что угодно , допустим там форма регистрации, но это не столь сейчас так важно). Прикладываю код:
Код: выделить все
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>пример</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

   $(".menu a").hover(function() {
      $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
   }, function() {
      $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
   });
/*
$(".menu a").click(function() {
      $(this).next("em").show();
   
   });

*/
});
</script>

<style type="text/css">
body {
   margin: 10px auto;
   width: 570px;
   font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
   margin: 100px 0 0;
   padding: 0;
   list-style: none;
}
.menu li {
   padding: 0;
   margin: 0 2px;
   float: left;
   position: relative;
   text-align: center;
}
.menu a {
   padding: 14px 10px;
   display: block;
   color: #000000;
   width: 144px;
   text-decoration: none;
   font-weight: bold;
   background: #FFCC00;
}
.menu li em {
   background: #FF9900;
   width: 180px;
   height: 45px;
   position: absolute;
   top: -85px;
   left: -15px;
   text-align: center;
   padding: 20px 12px 10px;
   font-style: normal;
   z-index: 2;
   display: none;
}
</style>
</head>

<body>

<ul class="menu">
   <li>
      <a href="#">Пример</a>      
      <em>появляющийся блок</em>
   </li>
</ul>

</body>
</html>




Не могу теперь сообразить :? - если оставить код только анимации - работает, ели убрать из комментов код по клику - работает только то, что идет в коде первым. Вопрос: как сделать, чтоб срабатывало по этим 2м событиям. Заранее спасибо :?:
Аватар пользователя
Анастасия
 
Сообщений: 29
Зарегистрирован: 25 ноя 2011, 06:19

Re: При наведении - показать, при нажатии зафиксировать

Сообщение tuareg » 26 ноя 2011, 15:49

Ставьте флаг data(flag,true) на элементе и проверяйте если он false/нет вообще выполняйте анимацию иначе прекращайте действие return;
Хотя постойте. Hover сработает всегда сначала а уже потом click правильно? Следовательно вопрос зачем запускать событие по click?
tuareg
Модератор
 
Сообщений: 359
Зарегистрирован: 24 ноя 2010, 00:44

Re: При наведении - показать, при нажатии зафиксировать

Сообщение Анастасия » 26 ноя 2011, 16:45

hover работает до тех пор, пока не нажали click по элементу. как только мы нажали click, блок перестает быть всплывающей подсказкой, он всегда видим (там можно к примеру потом вводить данные и тп).
Аватар пользователя
Анастасия
 
Сообщений: 29
Зарегистрирован: 25 ноя 2011, 06:19

Re: При наведении - показать, при нажатии зафиксировать

Сообщение tuareg » 26 ноя 2011, 16:53

Я просто честно не понимаю в чем проблема!
1.Я навел мышку на блок==>сработал hover
2. Я кликнул ==> сработал click
Я просто не понимаю, при клике у Вас срабатывает то же что и при hover
Что Вы хотите?
tuareg
Модератор
 
Сообщений: 359
Зарегистрирован: 24 ноя 2010, 00:44

Re: При наведении - показать, при нажатии зафиксировать

Сообщение Анастасия » 26 ноя 2011, 17:25

Понимаете когда я вставляю так код

<script type="text/javascript">
$(document).ready(function(){

$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});

$(".menu a").click(function() {
$(this).next("em").show();

});
});
</script>

работает только одно то что первое прописано в коде, в данном случае это hover. я не могу сообразить, как сделать чтоб одновременно работало и то и то
Аватар пользователя
Анастасия
 
Сообщений: 29
Зарегистрирован: 25 ноя 2011, 06:19

Re: При наведении - показать, при нажатии зафиксировать

Сообщение tuareg » 26 ноя 2011, 18:57

Может я дурак. Но по любому сначала сработает hover. Зачем Вы дублируете эффект show?
Т.е вы навели==>сработал hover. Тут же кликнули а hover еще работает и что получается?
tuareg
Модератор
 
Сообщений: 359
Зарегистрирован: 24 ноя 2010, 00:44

Re: При наведении - показать, при нажатии зафиксировать

Сообщение Анастасия » 27 ноя 2011, 08:50

что по клику не работает показ блока, вот я как бы и спрашиваю как сделать лучше, набросала примерный код и так как я пока не совсем разбираюсь) проверьте код и увидите что по клику не работает так как ховер первый. я не знаю мож другое событие применить чтоб добиться подобного эффекта , чтобы по клику форма появилась и никуда не исчезала, как объединить получается и ховер и клик
Аватар пользователя
Анастасия
 
Сообщений: 29
Зарегистрирован: 25 ноя 2011, 06:19

Re: При наведении - показать, при нажатии зафиксировать

Сообщение tuareg » 27 ноя 2011, 11:37

Все правильно у Вас работает. И click() тоже работает. Просто когда Вы убираете курсор с <a> срабатывает код
Код: выделить все
function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});

Смотрите мой первый ответ. Попробуйте если не получится я выложу решение.
Подсказка
1.При наведении на ссылку сработал
Код: выделить все
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");

2.При клике
Код: выделить все
$(this).next("em").show();

3.Когда убрали курсор с ссылки
Код: выделить все
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");

Вот таков порядок работы Вашего кода, что бы убедиться что это так можете прописать alert( цифра ) в каждой ф-и.
Что получается Вы навели на ссылку==>появился блок, кликнули===> блок зачем-то еще раз появился(тут не надо делать show()), убрали с ссылки===>блок исчез
tuareg
Модератор
 
Сообщений: 359
Зарегистрирован: 24 ноя 2010, 00:44

Re: При наведении - показать, при нажатии зафиксировать

Сообщение tuareg » 27 ноя 2011, 17:21

Разобрались?
tuareg
Модератор
 
Сообщений: 359
Зарегистрирован: 24 ноя 2010, 00:44

Re: При наведении - показать, при нажатии зафиксировать

Сообщение Анастасия » 30 ноя 2011, 05:14

Получается в этом случае если я уберу мышку с ссылки после клика блок исчезнет в любом случае?
Аватар пользователя
Анастасия
 
Сообщений: 29
Зарегистрирован: 25 ноя 2011, 06:19

След.

Вернуться в Вопросы от совсем новичков

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3