18:17
Это простая техника анимацию используемая на jQuery. Мы будем использовать этот эффект для манипуляции нашим CSS , создавая плавный переход между двумя областями изображения.
Смотрим ДЕМО
Установка:
Для начала нам нужно подключить стили css, между head и /head:
Code
<style type="text/css">
/* simple reset */
html,body,div,h2,img {margin:0;padding:0;border:none;}
html {
font:1em Arial, Helvetica, sans-serif;
color:#444;
}
h1 { text-align:center;}
#container {
margin:100px auto;
width:909px;
}
#container div {
margin-right:3px;
float:left;
width:296px;
height:130px;
border:1px solid #999;
position:relative;
overflow:hidden;
}
#container img {
position:absolute;
}
</style>
Далее подключаем jQuery, перед закрывающимся тегом /body:
Code
<script type="text/javascript">
$(function(){
$("#container div a").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});
</script>
Это вставляем туда где хотим видеть наш эффект:
Code
<div id="container">
<h1>jQuery image slide on hover effect</h1>
<div><a href="#"><img src="http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/image-1.jpg" alt="" /></a></div>
<div><a href="#"><img src="http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/image-2.png" alt="" /></a></div>
<div><a href="#"><img src="http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/image-3.jpg" alt="" /></a></div>
</div>
Ссылки на изображения меняем на свои
