09.03.2015, 12:12
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
Последний раз редактировалось рони, 09.03.2015 в 15:47.
|
|
09.03.2015, 12:17
|
|
Аспирант
|
|
Регистрация: 08.03.2015
Сообщений: 78
|
|
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/
Всем большое спасибо!
|
|
09.03.2015, 12:21
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
snovapavel,
чем 11 пост не устраивает?
|
|
09.03.2015, 12:35
|
|
Аспирант
|
|
Регистрация: 08.03.2015
Сообщений: 78
|
|
рони,
Всё отлично, (немного опередили меня).
Осталась только одна маленькая проблема, - задержка перед скрытием блока половина секунды. Я прописал свойство .delay(500) вот сюда:
.mouseleave(function() {
$(this).stop(true).delay(500).animate({
width: 150
}, 200).css("overflow-x", "scroll")
Но теперь, пропадает полоса прокрутки при сворачивании блока...
Простите меня бестолкового. Как это исправить?
|
|
09.03.2015, 13:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
snovapavel,
смотрите пост 11 снова
|
|
09.03.2015, 15:23
|
|
Аспирант
|
|
Регистрация: 08.03.2015
Сообщений: 78
|
|
рони,
Дорогой друг!
Я признателен вам за помощь, но в какой-то момент времени мы свернули не туда и теперь вернулись все те проблемы, от которых я два дня старательно уходил.
Преимущества моего сниппета:
- Реагирует даже на мгновенный проход мышкой над блоком, даже независимо от того, в фокусе окно браузера или нет;
- При проходе над блоком - блок раскрывается полностью, отсчитывает секунду, и только потом закрывается. Если провести мышкой над блоком через 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);
});
});
Откуда я взял пример который доработал: ссылка
Я вас очень прошу, доработать именно его, так как хочется наконец сделать адекватное и удобное меню, работающее идеально.
Огромное спасибо за оказанную помощь!
|
|
09.03.2015, 15:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
snovapavel,
посмотрите пост 11 и скажите что не так
|
|
09.03.2015, 17:11
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Но осталась одна проблема, если навести мышку на верхний блок и передвинуть мышку на соседний, то не закроются оба пока мышку не уберёшь, а ведь предыдущий должен закрываться...
Опытным путём удалось выяснить, что дело вот в этом отрезке кода:
Я писал, что перед запуском анимации текущего блока, если нужно, то можно остановить анимацию у всех блоков $('.container').stop(). Зачем вам таймер и hover? Зачем queue:false, если по умолчанию все назначенные анимации и не добавляются в очередь?
|
|
10.03.2015, 12:23
|
|
Аспирант
|
|
Регистрация: 08.03.2015
Сообщений: 78
|
|
|
рони,
Дорогой друг, вы можете прикрутить сюда таймер, чтобы при наведении мышкой, всегда заново начинался отсчёт половины секунды до скрытия и блок не сворачивался? Тогда можно будет избавиться от скакания.
А так, я вынужден признать свою ошибку. Я написал отвратительный код... Простите.
Спасибо вам за работу, друзья!
|
|
10.03.2015, 13:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от snovapavel
|
|
Дорогой друг, вы можете прикрутить сюда таймер, чтобы при наведении мышкой, всегда заново начинался отсчёт половины секунды до скрытия и блок не сворачивался? Тогда можно будет избавиться от скакания.
|
не понимаю что у вас скачет в 11 посте |
|
|
|
