Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.12.2015, 22:07
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 443

Как правильно определить делегирование событий?
Привет! Есть два вопроса . По поводу первого: у меня есть n-ое число инлайн-блоков. При hover на каждом блоке у меня происходит выполнение набора анимаций. Но анимация срабатывает сразу на ВСЕХ блоках.

$('.capabilitySection-block').hover(
	function(){
	    $('.capabilitySection-label').animate({paddingTop:'0px'},'slow');
            $('.capabilitySection-block').css('background','none');
	    $('.capabilitySection-comment').animate({opacity:'1'},'slow');
	 },
         function(){
            $('.capabilitySection-label').animate({paddingTop:'120px'},'slow');
            $('.capabilitySection-block').css('background','url(....)');
            $('.capabilitySection-comment').animate({opacity:'0'},'slow');
});

Первый вопрос: как определить выполнение анимаций только для элемента (ОДНОГО), на которого наведена мышь ??

У меня есть мысли (я не лентяй). Я правильно понимаю, что надо .hover() сделать для РОДИТЕЛЯ моих блоков?

То есть я пишу:
$('.capabilitySection').hover=function(event){
		var target=event.target;
		if (target.className!='.capabilitySection-block') return;

               // а вот тут как быть? Добавить элементы из верхнего скрипта?

}


Второй вопрос: при всех этих наведениях у меня почему-о не функционирует .css('background','url(....)'); Изображение изначально задано бекграундом, а по наведению (задумка) удаляется. Но этого не происходит . При этом URL у меня правильный.
Ответить с цитированием
  #2 (permalink)  
Старый 07.12.2015, 22:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,334

Coriolan161,
html напишите
или как обычно ...

$('.capabilitySection-label', this).stop(true, true).animate({paddingTop:'0px'},'slow');

и лучше переписать hover на mouseenter и mouseleave
ну и вместо 'background' терзайте backgroundImage
Ответить с цитированием
  #3 (permalink)  
Старый 07.12.2015, 22:48
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 443

рони,
<div class="capabilitySection">
    <div class="capabilitySection-block">
        <p  class="capabilitySection-comment">Появляющийся коммент</p>
        <p  class="capabilitySection-label">Подпись</p>
    </div>
<!--..... и таких блоков (capabilitySection-block)ещё пятеро-->
</div>
Ответить с цитированием
  #4 (permalink)  
Старый 07.12.2015, 23:42
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 443

рони, я сделал))) за идею с разделением hover спасибо
Ответить с цитированием
  #5 (permalink)  
Старый 07.12.2015, 23:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,334

hover jquery проблемы
Coriolan161,
css сразу добавить, не судьба было ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      .capabilitySection-block{
        height: 80px;
        float: left;
         width: 300px;
         background-image:  url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
          background-repeat: no-repeat;
         background-size: 100% 100%;
      }
      .capabilitySection-label{
        padding-top: 120px;
      }
      .capabilitySection-comment{
        opacity:0;
      }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function() {
      $('.capabilitySection-block').on({
          mouseenter: function() {
              $('.capabilitySection-label', this).stop(true, true).animate({
                  paddingTop: '0px'
              }, 'slow');
              $(this).css('backgroundImage', 'none');
              $('.capabilitySection-comment', this).stop(true, true).animate({
                  opacity: '1'
              }, 'slow');
          },
          mouseleave: function() {
              $('.capabilitySection-label', this).stop(true, true).animate({
                  paddingTop: '120px'
              }, 'slow');
              $(this).css('backgroundImage', 'url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif)');
              $('.capabilitySection-comment', this).stop(true, true).animate({
                  opacity: '0'
              }, 'slow');
          }
      });

  });

  </script>
</head>

<body>

<div class="capabilitySection">
    <div class="capabilitySection-block">
        <p  class="capabilitySection-comment">Появляющийся коммент</p>
        <p  class="capabilitySection-label">Подпись</p>
    </div>
    <div class="capabilitySection-block">
        <p  class="capabilitySection-comment">Появляющийся коммент</p>
        <p  class="capabilitySection-label">Подпись</p>
    </div>
<!--..... и таких блоков (capabilitySection-block)ещё пятеро-->
</div>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 07.12.2015, 23:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,334

Coriolan161,
ок справились сами
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно прописать полученные значения с сервера? Dimaz jQuery 0 07.12.2012 18:46
как правильно отслеживать вставку html() bombascter jQuery 15 20.11.2012 08:47
Как определить была ли ссылка посещена Почемучкин Элементы интерфейса 12 10.09.2012 10:54
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14
О наследовании событий, или как корректно его отменить. JCShen Events/DOM/Window 8 09.02.2010 00:00