Здравствуйте.
Нашел скрипт, немного подредактировал.
Теперь при наведении на один из квадратов, над ним появляется надпись.
Но мне нужно, чтобы эта надпись плавно подъезжала к квадрату при наведении курсора на квадрат и центрировалась по квадрату, а не ездила за курсором, пока он наведен на квадрат, как сейчас.
Если в скрипте заменить строчку
$('#button').css('left', x);
на
$('#button').animate({left:x}, 1500)
то этот дает что-то похожее на правду, но анимация срабатывает только единожды.
Подскажите, что изменить, чтобы было как мне надо?
http://jsfiddle.net/sqqpn/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="js.js"></script>
</head>
<body>
<div id="container">
<div id="block">
<div></div>
<div></div>
<div></div>
</div>
<div id="button">ЫЫЫЫЫЫ</div>
</div>
</body>
</html>
CSS
|
Код:
|
#block div{
width: 100px;
height: 100px;
float: left;
margin:50px;
background: lightgreen;
}
#button{
position:absolute;
} |
JQUERY
$(function () {
wW = $('#block').width();
oL = $('#block').offset().left;
fW = $('#button').width();
$('#block').mousemove(function(e){
x = e.pageX-fW/2;
if (x >= wW+oL-fW) {x = wW+oL-fW;};
if (x <= oL) {x = oL;};
$('#button').css('left', x);
});
});
