|
Сообщение от zerofx
|
|
может Вы не увидели
|
Незаметил...
|
Сообщение от zerofx
|
|
в моем случае изображение. и при подведении к нему курсором надо чтобы активировался другой блок
|
Так челе?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
body{
/* Setting default text color, background and a font stack */
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}
#t1 {
position: relative;
}
.menu{
width:800px;
height:52px;
position:relative;
top:200px;
left:100px;
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
.item{
position:relative;
background-color:#A59877;
width:52px;
margin:0px 5px;
height:52px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
</style>
<script type="text/javascript">
$(function (){
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
$('#main > img').hover(
function(){
var $this = $(this).next('.item');
expand($this);
},
function(){
var $this = $(this).next('.item');
collapse($this);
}
);
});
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'268px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
}
</script>
</head>
<body>
<div id="main">
<img src="http://i019.radikal.ru/1401/eb/8627bece3393.gif" id="object">
<div class="item"></div>
</div>
</body>
</html>