Здравствуйте, пытаюсь сделать "эффектный" информационный блок... который изначально имеет "бедный" вид (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, но плиз! подскажите как увязать такую последовательность событий или другую схему в общих чертах, или хоть в какой раздел учебника посмотреть....
Чувствую что ситуация то трехкопеешная
