05.09.2013, 19:40
|
|
Интересующийся
|
|
Регистрация: 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.
|
|
05.09.2013, 21:14
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
wreder,
'mouseenter mouseleave' ставить на класс "бедный" через on
click убирать класс "бедный"
close анимировать сворачивание ставить класс "бедный"
|
|
06.09.2013, 15:49
|
|
Интересующийся
|
|
Регистрация: 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.
|
|
07.09.2013, 13:17
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
wreder,
$(document).on('mouseenter','.simlpe', function(event)
Последний раз редактировалось рони, 10.09.2013 в 12:10.
|
|
10.09.2013, 12:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
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>
|
|
11.09.2013, 21:21
|
|
Интересующийся
|
|
Регистрация: 05.09.2013
Сообщений: 22
|
|
рони, да! hey hey hey! это круто! оно и сворачивается и ховерится! не думал что один небольшой код может вызвать столько эмоций..... 
я тоже догадался потом как сделать mouseenter и mouseleave через on ...и click вкупе с removeClass'ом ... а вот на счет сворачивания - это было сложно .....а у Вас оно получилось, да как хитрО.... через доп. класс....
Спасибо!.... только вот хотелось бы чтоб сворачивание было по плавнее - чтоб цветной border оставался до нужной ширины, а потом уже пропадал... т.е. как то поэтапно/посимпатичнее...
Но тут опять проблемы с реализацией, как бы это смастерить.... может отслеживать конец анимации и к классам закончившим анимироваться добавлять новое значение, а потом к таким классам применять событие по доведению css до первоначального вида? ...или просто поэтапная анимация объектов за одно событие?, но у меня она что-то капризничает...
|
|
11.09.2013, 21:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
wreder,
ксс надо ставить в конец анимации иначе анимация ещё идёт а ксс уже применено. строка 68 -- ксс убирайте в callback -- медитировать над callback можно тут Помогите с анимацией выпадающего меню
|
|
11.09.2013, 21:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
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>
|
|
12.09.2013, 22:54
|
|
Интересующийся
|
|
Регистрация: 05.09.2013
Сообщений: 22
|
|
рони, ААААА!!! МУЖИИИК!!! ...это ИДЕАЛЬНО! ...даже не знаю что и сказать..... я прям свой жизненный css поменял будто ....поменял, закрыл фигурную, закрыл простую, точка с запятой, скрипт со слешем! 
да... на счет анимации и ксс так и делал, но почему-то вместо
}, 'slow', function () {
$(this).css({
});
я всегда ставил
}, 'slow', function () {
css({
});
наверно надеясь на то что селектор вроде как выбран изначально... да... мне даже как то неловко за беспокойство по ерунде... потому как в базовых знаниях еще плаваю....
СПАСИБО человеческое большое Вам... меня эта задачка здорово обогатила в плане вкуса на коды!.... да и анимация информационного блока моего в итоге срежиссировалась как надо!... хоть на Оскар везти, за актерскую игру врятли, а вот за спецэффекты можно было бы получить! 
|
|
|
|
