Javascript.RU

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

Не получается увязать hover + click
Здравствуйте, пытаюсь сделать "эффектный" информационный блок... который изначально имеет "бедный" вид (img +заголовок)... при наведении в нем появляются скрытые элементы, изменяется CSS... а при клике блок расширяется, добавляется анимация и кнопка "закрыть"... клацанье по которой приводит блок к первоначальному "бедному" виду.

Но т.к. я конечно вообразил из себя "продвинутого пользователя", то пытаюсь заниматься самокодированием, а так как javascript это не для смертных, то решение стало иметь такой вид:
$(document).ready(function(){
      $('.class').bind('mouseenter',function(event){ // наведение
		$(this).css({
                          'width':'10px', // всякие изменения
			});			
		
		$(this).bind('mouseleave',function(){ // отведение				
		$(this).css({			
			  'width':' ' // отмена изменений			  
			});	 	
		
		    });	
					
		});		


	
		$('.class').click(function(event) { // событие для клика
			$(this).animate({ 
                                  // всякая анимация				
				})
				.css({
                                   // еще изменения
				});			
			$(this).unbind('mouseenter mouseleave');	 // чтобы блок с информацией не скрывался от положения курсора			
									
			event.stopPropagation();

				});	

			
		$('.close button').bind('click',function(event){ // для сворачивания блока в исходное
			
		    $('.class').animate({
			 // возврат исходных значений
				})
				.css({
                         // возврат исходных значений
                                })			  

		     });

 });


...как то так...даже вроде все разворачивается и сворачивается.
Основная же проблема в том, что после события click по "close button" события bind('mouseleave') и bind('mouseenter') не работают...ну причина в unbind конечно, но как снова запустить бинды или как препятствовать сворачиванию блока в момент события click для '.class' ???

Что я только не перепробовал для альтернативы unbind('mouseenter mouseleave') или вообще другой схемы события.... сколько ни гуглил, но ни похожих примеров, ни похожих тем на форумах, ни подходящей рабочей схемы не встретилось.

Скорее всего мой вариант просто "пацсталомный" для каждого кто знает javascript, но плиз! подскажите как увязать такую последовательность событий или другую схему в общих чертах, или хоть в какой раздел учебника посмотреть....

Чувствую что ситуация то трехкопеешная

Последний раз редактировалось wreder, 05.09.2013 в 19:44.
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2013, 21:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

wreder,
'mouseenter mouseleave' ставить на класс "бедный" через on
click убирать класс "бедный"
close анимировать сворачивание ставить класс "бедный"
Ответить с цитированием
  #3 (permalink)  
Старый 06.09.2013, 15:49
Интересующийся
Отправить личное сообщение для wreder Посмотреть профиль Найти все сообщения от wreder
 
Регистрация: 05.09.2013
Сообщений: 22

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

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css"> 
  .simlpe {	
	height: 110px;
	width: 80px;
	border: 1px solid #FFF;
	overflow:hidden;	
}
  
  .text {
	color: #000;
	float: left;	
}
 </style>

<script type="text/javascript">
$(document).ready(function(){
	
	$('.simlpe').on('mouseenter', function(event){ // наведение исправил
			$(this).css({			 
			  'width':'110px',
			  'borderTop': '1px solid #FF0000',
			  'borderBottom': '1px solid #FF0000',
			  'borderLeft': '1px solid #FF0000',
			  'borderRight': '1px solid #FF0000'			  
			});
			$(this).children('.text').css({
			  'color': '#FF0000'
			});
							
		$(this).on('mouseleave', function(){	 // отведение  исправил			
		$(this).css({			
			  'width':'',
			  'borderTop': '',
			  'borderBottom': '',
			  'borderLeft': '',
			  'borderRight': ''			
			});
		$(this).children('.text').css({
			  'color': ''
			});	 	
		
			});					
		});				
						
			
			$('.simlpe').click(function(event) { // событие для клика
			$(this).removeClass('simlpe text');					
			$(this).animate({				
				'width':'336px',
				'height':'110px'				
				}, 'slow');
			$(this).children('.text').css({
				'float':'right'
				});				
			event.stopPropagation();			
			});	
						
		$(document).click(function(e){ // для сворачивания блока в исходное при нажатии за границу элемента
			if ($(e.target).filter('.simlpe').length != 1) {
		    $('.simlpe').animate({			  
				'width':'80px',
				'height':'110px'
				}, 'slow').css({
				'borderTop': '',
			    'borderBottom': '',
				'borderLeft': '',
				'borderRight': ''				
				});
			$(this).children('.text').css({
				'float':'',
				'color': ''
				});			
			}
			$(this).addClass('.simlpe text'); 
		});
	});

</script>

</head>
<body>

<div class="simlpe">
 
 <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
 
 <nobr class="text">Центральный Javascript-ресурс</nobr> 

 </div>

</body>


...теперь видно что я мучаюсь как
Сообщение от рони Посмотреть сообщение
убирать класс "бедный"
и

Сообщение от рони Посмотреть сообщение
close анимировать сворачивание ставить класс "бедный"
и не нужно ли будет при такой схеме ставить на событие click addClass с новыми css значениями для .simlpe и для .text (не хотелось бы в 2 раза увеличивать css, потому как в том блоке намного больше классов чем в тут в примере)?

P.s. Сорри за использование картинки с шапки этого сайта...

Последний раз редактировалось wreder, 06.09.2013 в 15:54.
Ответить с цитированием
  #4 (permalink)  
Старый 07.09.2013, 13:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

wreder,
$(document).on('mouseenter','.simlpe', function(event)

Последний раз редактировалось рони, 10.09.2013 в 12:10.
Ответить с цитированием
  #5 (permalink)  
Старый 10.09.2013, 12:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

wreder,
примерно так ...
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
  .simlpe {
	height: 110px;
	width: 80px;
	border: 1px solid #FFF;
	overflow:hidden;
}

  .text {
	color: #000;
	float: left;
}
 </style>

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

	$(document).on('mouseenter','.simlpe', function(event){ // наведение исправил
			$(this).css({
			  'width':'110px',
			  'borderTop': '1px solid #FF0000',
			  'borderBottom': '1px solid #FF0000',
			  'borderLeft': '1px solid #FF0000',
			  'borderRight': '1px solid #FF0000'
			});
			$(this).children('.text').css({
			  'color': '#FF0000'
			});

		});
        $(document).on('mouseleave','.simlpe', function(event){ // наведение исправил
		$(this).css({
			  'width':'',
			  'borderTop': '',
			  'borderBottom': '',
			  'borderLeft': '',
			  'borderRight': ''
			});
		$(this).children('.text').css({
			  'color': ''
			});

			});


			$('.simlpe').click(function(event) { // событие для клика
			$(this).removeClass('simlpe');
			$(this).animate({
				'width':'336px',
				'height':'110px'
				}, 'slow');
			$(this).children('.text').css({
				'float':'right'
				});
			event.stopPropagation();
			});

		$(document).click(function(e){ // для сворачивания блока в исходное при нажатии за границу элемента
            var target = $(e.target).filter('.one');
            if (target.length != 1) {
		    $('.one').animate({
				'width':'80px',
				'height':'110px'
				}, 'slow').css({
				'borderTop': '',
			    'borderBottom': '',
				'borderLeft': '',
				'borderRight': ''
				});
			$('.one').children('.text').css({
				'float':'',
				'color': ''
				});
			}
		   	$('.one').addClass('simlpe');
		});
	});

</script>

</head>
<body>

<div class="simlpe one">

 <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>

 <nobr class="text">Центральный Javascript-ресурс</nobr>

 </div>

</body>
Ответить с цитированием
  #6 (permalink)  
Старый 11.09.2013, 21:21
Интересующийся
Отправить личное сообщение для wreder Посмотреть профиль Найти все сообщения от wreder
 
Регистрация: 05.09.2013
Сообщений: 22

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

я тоже догадался потом как сделать mouseenter и mouseleave через on ...и click вкупе с removeClass'ом ... а вот на счет сворачивания - это было сложно .....а у Вас оно получилось, да как хитрО.... через доп. класс....

Спасибо!.... только вот хотелось бы чтоб сворачивание было по плавнее - чтоб цветной border оставался до нужной ширины, а потом уже пропадал... т.е. как то поэтапно/посимпатичнее...

Но тут опять проблемы с реализацией, как бы это смастерить.... может отслеживать конец анимации и к классам закончившим анимироваться добавлять новое значение, а потом к таким классам применять событие по доведению css до первоначального вида? ...или просто поэтапная анимация объектов за одно событие?, но у меня она что-то капризничает...
Ответить с цитированием
  #7 (permalink)  
Старый 11.09.2013, 21:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

wreder,
ксс надо ставить в конец анимации иначе анимация ещё идёт а ксс уже применено. строка 68 -- ксс убирайте в callback -- медитировать над callback можно тут Помогите с анимацией выпадающего меню
Ответить с цитированием
  #8 (permalink)  
Старый 11.09.2013, 21:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

wreder,
callback строка 88
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
  .simlpe {
	height: 110px;
	width: 80px;
	border: 1px solid #FFF;
	overflow:hidden;
}

  .text {
	color: #000;
	float: left;
}
 </style>

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

 				$(document).on('mouseenter', '.simlpe', function(event)
 						{// наведение исправил
 								$(this).css(
 										{
 										'width': '110px',
 										'borderTop': '1px solid #FF0000',
 										'borderBottom': '1px solid #FF0000',
 										'borderLeft': '1px solid #FF0000',
 										'borderRight': '1px solid #FF0000'
 										}
 								);
 								$(this).children('.text').css(
 										{
 										'color': '#FF0000'
 										}
 								);

 						}
 				);
 				$(document).on('mouseleave', '.simlpe', function(event)
 						{// наведение исправил
 								$(this).css(
 										{
 										'width': '',
 										'borderTop': '',
 										'borderBottom': '',
 										'borderLeft': '',
 										'borderRight': ''
 										}
 								);
 								$(this).children('.text').css(
 										{
 										'color': ''
 										}
 								);

 						}
 				);

 				$('.simlpe').click(function(event)
 						{// событие для клика
 								$(this).removeClass('simlpe');
 								$(this).animate(
 										{
 										'width': '336px',
 										'height': '110px'
 										}, 'slow'
 								);
 								$(this).children('.text').css(
 										{
 										'float': 'right'
 										}
 								);
 								event.stopPropagation();
 						}
 				);

 				$(document).click(function(e)
 						{// для сворачивания блока в исходное при нажатии за границу элемента
 								var target = $(e.target).filter('.one');
 								if (target.length != 1) {
 										$('.one').animate(
 												{
 												'width': '80px',
 												'height': '110px'
 												}, 'slow', function ()
 												{
 														$(this).css(
 																{
 																'borderTop': '',
 																'borderBottom': '',
 																'borderLeft': '',
 																'borderRight': ''
 																}
 														)
 														.addClass('simlpe')
 														.children('.text').css(
 																{
 																'float': '',
 																'color': ''
 																}
 														);

 												}
 										)

 								};
 						}
 				);
 		}
 );
</script>

</head>
<body>

<div class="simlpe one">

 <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>

 <nobr class="text">Центральный Javascript-ресурс</nobr>

 </div>

</body>
Ответить с цитированием
  #9 (permalink)  
Старый 12.09.2013, 22:54
Интересующийся
Отправить личное сообщение для wreder Посмотреть профиль Найти все сообщения от wreder
 
Регистрация: 05.09.2013
Сообщений: 22

рони, ААААА!!! МУЖИИИК!!! ...это ИДЕАЛЬНО! ...даже не знаю что и сказать..... я прям свой жизненный css поменял будто ....поменял, закрыл фигурную, закрыл простую, точка с запятой, скрипт со слешем!

да... на счет анимации и ксс так и делал, но почему-то вместо
}, 'slow', function () {
$(this).css({
});


я всегда ставил
}, 'slow', function () {
css({
});


наверно надеясь на то что селектор вроде как выбран изначально... да... мне даже как то неловко за беспокойство по ерунде... потому как в базовых знаниях еще плаваю....

СПАСИБО человеческое большое Вам... меня эта задачка здорово обогатила в плане вкуса на коды!.... да и анимация информационного блока моего в итоге срежиссировалась как надо!... хоть на Оскар везти, за актерскую игру врятли, а вот за спецэффекты можно было бы получить!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему-то не получается сделать click по дочернему элементу. adelante jQuery 1 14.01.2013 02:02
Изменение свойства :hover по клику дива BoB jQuery 6 21.10.2012 13:36
Заменить свойство click на hover, как? denjer Events/DOM/Window 1 06.09.2012 13:28
Установка цвета через функцию .css() сбрасывает цвет для :hover xintrea jQuery 4 18.08.2012 15:38
live click выполняется несколько раз hara jQuery 9 09.06.2010 10:58