плавная смена background
Всем привет. Может я конечно не умею искать, но так и не нашел
Столкнулся с такой проблемой, надо что бы плавно(анимированно) менялся фон. То есть есть картинка высотой 30px, по умолчанию в css напсиано background-position: left -15px; надо что бы при наведении фон плавно перекатился до background-position: left 0; сделать что то типа такого: http://minimalmonkey.com/ см. вверхнем меню About и Contact но здесь реализовано блочно |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div {
width: 200px;
height: 100px;
background: url('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif') no-repeat;
background-position: -50px 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('div').mouseover(function(){
$(this).css({
'background-position': '0 0'
});
});
$('div').mouseout(function(){
$(this).css({
'background-position': '-50px 0'
});
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
|
ksa, спасибо за отклик, но надо что бы он плавно переезжал, то есть попиксельно менялась позиция, что бы глазу было видать как картинка съезжает :)
|
<!DOCTYPE html>
<html>
<head>
<style>
.image {
border:2px solid transparent;
margin:0;
padding:0;
height:150px;
width:200px;
background:transparent url(http://imgn.dt00.net/2092/2092123_b.jpg) no-repeat 0 50%;
-webkit-transition-duration: 0.96s;
-moz-transition-duration: 0.96s;
-o-transition-duration: 0.96s;
-ms-transition-duration: 0.96s; /* IE9+ */
transition-duration: 0.96s;
}
.image:hover {
background-position: -65px 50%;
}
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>
|
Deff:
1) Префиксные свойства надо располагать в начале 2) Нет такого и не будет: -ms-transition-duration: 0.96s; /* IE9+ */ Какой нахрен IE9 ? Он же не поддерживает транзишны? Кто вас такой шняге учит?? Дядя Попов чтоли? |
Цитата:
|
Deff, спасибо)) помог)
|
Deff, ну ты и
|
| Часовой пояс GMT +3, время: 04:02. |