рони,
Спасибо за то что откликнулись, логику Вашу кажись понял, но с реализацией вот трудности...
Схема с более точным видом самой задачи и попыткой внедрения новой логики:
<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. Сорри за использование картинки с шапки этого сайта...