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>