jquery animate from object center
I am trying to create a product view开发者_运维知识库er similar to the one at the bottom of this page http://www.logitech.com/en-gb/. As you can see the product animates from the center rather than top left which I think is Jquery's default. So what I am doing is trying animate the width and height and then also the offset to make it look like it animates from the center.
My code looks like this:
<style>
body {
background: black;
}
.box {
background: #fff url('pic.jpg') no-repeat 0 0;
width: 200px;
height: 200px;
margin: 10px 4%;
float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".box").hover(function() {
$(".box").not(this).fadeTo(500, 0.5);
$(this).animate({
width: 300,
height: 300,
left: -100,
top: -100
}, 500);
},
function() {
$(this).animate({
width: 200,
height: 200,
left: 100,
top: 100
}, 500);
$(".box").fadeTo(500, 1);
});
});
</script>
I cannot seem to get this working as I want. Can anyone help with this or suggest a better technique? Many thanks
After playing around I have managed to get the effect I want. Here is the code so far:
<html>
<head>
<script src="../jquery.js"></script>
<style>
body {
background: black;
}
.box {
background: #fff;
width: 200px;
height: 200px;
margin: 10px 4%;
float: left;
position: relative;
z-index: 0;
}
img {
position: relative;
top: 0;
left: 0;
z-index: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".box").hover(function() {
$(".box").not(this).fadeTo(500, 0.1);
$(this).find('img').animate({
width: 300,
height: 300,
left: -50,
top: -50
}, 100);
},
function() {
$(".box").fadeTo(100, 1);
$(this).find('img').animate({
width: 200,
height: 200,
left: 0,
top: 0
}, 500);
});
});
</script>
</head>
<body>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
<div class="box"><img src="pic.jpg" /></div>
</body>
加载中,请稍侯......
精彩评论