вопрос
Всем привет,
на сайте у меня заголовки различаются длиной и я спрятал их через overflow. Пытался сделать сам, чтобы при наведении показывался полный заголовок, т.е. чтоб тот выезжал. Но, как и говорил, длина заголовков разная и хотелось бы, чтоб всё это как-то регулировалось.
http://jsfiddle.net/MaHarder/4yphcyys/2/
Может, кто нибудь подскажет, в каком направлении искать?
на сайте у меня заголовки различаются длиной и я спрятал их через overflow. Пытался сделать сам, чтобы при наведении показывался полный заголовок, т.е. чтоб тот выезжал. Но, как и говорил, длина заголовков разная и хотелось бы, чтоб всё это как-то регулировалось.
http://jsfiddle.net/MaHarder/4yphcyys/2/
Может, кто нибудь подскажет, в каком направлении искать?
<style>
.h1top{
height: 36px;
overflow: hidden;
white-space: nowrap;
position: relative;
}
.h1top:after{
content: "";
display: block;
position: absolute;
top:0;
right: 0;
width: 50px;
height: 100%;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.h1top h1{
display: inline-block;
}
</style>
<script>
var title_offset_interval = null;
$(document)
.on('mouseenter',".h1top h1",function(){
var $this = $(this);
clearInterval(title_offset_interval);
if($this.width()>$this.parent().width()){
title_offset_interval = setInterval(function(){
if($this.width()+parseInt($this.css('margin-left'))<$this.parent().width()) clearInterval(title_offset_interval);
$this.css({'margin-left': Math.floor(parseInt($this.css('margin-left'))-1)+'px'});
},10);
}
})
.on('mouseleave',".h1top h1",function(){
var $this = $(this);
clearInterval(title_offset_interval);
if(parseInt($this.css('margin-left'))<0){
title_offset_interval = setInterval(function(){
if(parseInt($this.css('margin-left'))>=0) clearInterval(title_offset_interval);
$this.css({'margin-left': Math.floor(parseInt($this.css('margin-left'))+1)+'px'});
},10);
}
})
</script>
<div class="h1top">
<h1>Как правильно сделать плавающий заголовок? Как правильно сделать плавающий заголовок? Как правильно сделать плавающий заголовок? Как правильно сделать плавающий заголовок?</h1>
</div>
