snovapavel,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.w {
display: block;
width: 150px;
}
.container {
margin: 0 0 50px 0;
padding: 0;
background-color: red;
position: relative;
overflow-x: scroll;
z-index: 9999;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".container").filter(function() {
var scroll = 150 < this.scrollWidth;
$(this).css("overflow-x", function(b, c) {
return scroll ? "scroll" : "auto"
});
return scroll
}).mouseover(function() {
$(this).stop(true).animate({
width: 600 < this.scrollWidth ? 600 : this.scrollWidth
}, 200).css("overflow-x", "scroll")
}).mouseleave(function() {
$(this).stop(true,true).delay(900).queue(function() {
$(this).animate({
width: 150
}, 200).dequeue().css("overflow-x", "scroll")
})
})
});
</script>
</head>
<body> <div class="w">
<pre class="container">Просто длинный текст. Просто длинный текст. Просто длинный текст. Просто длинный текст.
Просто длинный текст. Просто длинный текст. Просто длинный текст. Просто длинный текст.
Просто длинный текст. Просто длинный текст. Просто длинный текст. Просто длинный текст.</pre>
<pre class="container">Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст.</pre>
<pre class="container">Текст.</pre>
</div>
</body>
</html>
|
laimas,
Большое спасибо, теперь всё работает как надо. Вот код который получился:
$(document).ready(function() {
var t;
$('.container').hover(function() {
clearTimeout(t);
$(this).stop().animate({width: this.scrollWidth > 600 ? 600 : this.scrollWidth}, 200).css('overflow-x', 'auto');
}, function() {
t = setTimeout(function() {$('.container').animate({width: "150px"},{queue:false,duration:200}).css('overflow-x', 'auto');},
500);
});
});
Но осталась одна проблема, если навести мышку на верхний блок и передвинуть мышку на соседний, то не закроются оба пока мышку не уберёшь, а ведь предыдущий должен закрываться... Опытным путём удалось выяснить, что дело вот в этом отрезке кода:
}, function() {
t = setTimeout(function() {$('.container').animate({width: "150px"},{queue:false,duration:200}).css('overflow-x', 'auto');},
500);
подскажите как исправить. Вот проект на jsfiddle http://jsfiddle.net/n995Lmdj/5/ Всем большое спасибо! |
snovapavel,
чем 11 пост не устраивает? |
рони,
Всё отлично, (немного опередили меня). Осталась только одна маленькая проблема, - задержка перед скрытием блока половина секунды. Я прописал свойство .delay(500) вот сюда:
.mouseleave(function() {
$(this).stop(true).delay(500).animate({
width: 150
}, 200).css("overflow-x", "scroll")
Но теперь, пропадает полоса прокрутки при сворачивании блока... Простите меня бестолкового. Как это исправить? |
snovapavel,
смотрите пост 11 снова |
рони,
Дорогой друг! Я признателен вам за помощь, но в какой-то момент времени мы свернули не туда и теперь вернулись все те проблемы, от которых я два дня старательно уходил. Преимущества моего сниппета: - Реагирует даже на мгновенный проход мышкой над блоком, даже независимо от того, в фокусе окно браузера или нет; - При проходе над блоком - блок раскрывается полностью, отсчитывает секунду, и только потом закрывается. Если провести мышкой над блоком через 0.9 секунды, он опять отсчитает секунду и только потом закроется. Дёргаться он при этом не будет. - Очень хорошо реагирует на мышь, ловит её проход над собой даже за доли секунды. - Не болтается туда-сюда если быстро водить. Недостатки моего сниппета: - Раскрываются все блоки на странице сразу (это именно-то, что нужно было решить). - Раскрывались все блоки на странице, независимо от наличия полосы прокрутки (вы это решили). Мой сниппет:
$(document).ready(function() {
var t;
$('.container').hover(function() {
clearTimeout(t);
$('.container').animate({width: "200px"},{queue:false,duration:200}).css('overflow-x', 'auto');
}, function() {
t = setTimeout(function() {$('.container').animate({width: "150px"},{queue:false,duration:200}).css('overflow-x', 'auto');},
500);
});
});
Откуда я взял пример который доработал: ссылка Я вас очень прошу, доработать именно его, так как хочется наконец сделать адекватное и удобное меню, работающее идеально. Огромное спасибо за оказанную помощь! |
snovapavel,
посмотрите пост 11 и скажите что не так |
Но осталась одна проблема, если навести мышку на верхний блок и передвинуть мышку на соседний, то не закроются оба пока мышку не уберёшь, а ведь предыдущий должен закрываться...
Опытным путём удалось выяснить, что дело вот в этом отрезке кода: Я писал, что перед запуском анимации текущего блока, если нужно, то можно остановить анимацию у всех блоков $('.container').stop(). Зачем вам таймер и hover? Зачем queue:false, если по умолчанию все назначенные анимации и не добавляются в очередь? |
рони,
Дорогой друг, вы можете прикрутить сюда таймер, чтобы при наведении мышкой, всегда заново начинался отсчёт половины секунды до скрытия и блок не сворачивался? Тогда можно будет избавиться от скакания. А так, я вынужден признать свою ошибку. Я написал отвратительный код... Простите. Спасибо вам за работу, друзья! |
Цитата:
|
| Часовой пояс GMT +3, время: 17:25. |