Не получается увязать 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,
'mouseenter mouseleave' ставить на класс "бедный" через on click убирать класс "бедный" close анимировать сворачивание ставить класс "бедный" |
рони,
Спасибо за то что откликнулись, логику Вашу кажись понял, но с реализацией вот трудности... Схема с более точным видом самой задачи и попыткой внедрения новой логики:
<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>
...теперь видно что я мучаюсь как Цитата:
Цитата:
P.s. Сорри за использование картинки с шапки этого сайта... |
wreder,
$(document).on('mouseenter','.simlpe', function(event) |
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>
|
рони, да! hey hey hey! это круто! оно и сворачивается и ховерится! не думал что один небольшой код может вызвать столько эмоций..... :victory:
я тоже догадался потом как сделать mouseenter и mouseleave через on ...и click вкупе с removeClass'ом ... а вот на счет сворачивания - это было сложно .....а у Вас оно получилось, да как хитрО.... через доп. класс.... Спасибо!.... только вот хотелось бы чтоб сворачивание было по плавнее - чтоб цветной border оставался до нужной ширины, а потом уже пропадал... т.е. как то поэтапно/посимпатичнее... Но тут опять проблемы с реализацией, как бы это смастерить.... может отслеживать конец анимации и к классам закончившим анимироваться добавлять новое значение, а потом к таким классам применять событие по доведению css до первоначального вида? ...или просто поэтапная анимация объектов за одно событие?, но у меня она что-то капризничает... |
wreder,
ксс надо ставить в конец анимации иначе анимация ещё идёт а ксс уже применено. строка 68 -- ксс убирайте в callback -- медитировать над callback можно тут http://javascript.ru/forum/dom-windo...tml#post265188 |
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>
|
рони, ААААА!!! МУЖИИИК!!! ...это ИДЕАЛЬНО! ...даже не знаю что и сказать..... я прям свой жизненный css поменял будто ....поменял, закрыл фигурную, закрыл простую, точка с запятой, скрипт со слешем! :dance:
да... на счет анимации и ксс так и делал, но почему-то вместо
}, 'slow', function () {
$(this).css({
});
я всегда ставил
}, 'slow', function () {
css({
});
наверно надеясь на то что селектор вроде как выбран изначально... да... мне даже как то неловко за беспокойство по ерунде... потому как в базовых знаниях еще плаваю.... СПАСИБО человеческое большое Вам... меня эта задачка здорово обогатила в плане вкуса на коды!.... да и анимация информационного блока моего в итоге срежиссировалась как надо!... хоть на Оскар везти, за актерскую игру врятли, а вот за спецэффекты можно было бы получить! :yes: |
| Часовой пояс GMT +3, время: 01:28. |