2
我想建立一个动画div的jquery方法，使我的网站与旧浏览器兼容（目前使用CSS3），但我有一个奇怪的问题，其中一个页面上的div类的两个实例正在调整大小悬停。我在代码中使用this，所以它只应该动画处于悬停状态的div，就像其他正在发生更改的div一样，但由于某些原因，它不是。为什么这jQuery动画这个div类的两个实例？
的代码是
<!doctype html>
<html>
<head>
<title>Custom Animation</title>
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// if(!Modernizr.csstransitions) {
$(function() {
$('.gallery-item').hover(function(){
$(this).animate({height:'400px'},{queue:false,duration:500});
$('.wrapper', this).animate({width:'800px'},{queue:false,duration:500});
$('a', '.link', '.wrapper', this).animate({width:'509px',height:'360px'},{queue:false,duration:500});
$('.description', '.wrapper', this).animate({height:'340px'},{queue:false,duration:500});
}, function(){
$(this).animate({height:'200px'},{queue:false,duration:500});
$('.wrapper', this).animate({width:'1100px'},{queue:false,duration:500});
$('a', '.link', '.wrapper', this).animate({width:'800px',height:'160px'},{queue:false,duration:500});
$('.description', '.wrapper', this).animate({height:'140px'},{queue:false,duration:500});
});
});
// }
</script>
<style type="text/css">
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.gallery-item {
background: red;
height: 200px;
margin: 25px auto;
overflow: hidden;
width: 800px;
}
.gallery-item .wrapper {
background: blue;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -216px 0;
width: 1100px;
}
.gallery-item .wrapper .link a {
background: lime;
display: block;
height: 160px;
float: left;
width: 800px;
transition: height 2s, width 2s;
-khtml-transition: height 2s, width 2s;
-moz-transition: height 2s, width 2s;
-o-transition: height 2s, width 2s;
-webkit-transition: height 2s, width 2s;
}
.gallery-item .wrapper .description {
background: hotpink;
float: right;
height: 140px;
margin: 0 0 -216px 0;
padding: 10px;
overflow: hidden;
width: 271px;
transition: height 2s;
-khtml-transition: height 2s;
-moz-transition: height 2s;
-o-transition: height 2s;
-webkit-transition: height 2s;
}
.gallery-item h2 {
background: yellow;
clear: both;
height: 40px;
text-align: right;
margin: 176px 0 0 0;
width: 100%;
}
</style>
</head>
<body>
<div class="gallery-item">
<div class="wrapper">
<div class="link">
<a href="#"></a>
</div><!-- end link -->
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere dui quis enim pretium eu pulvinar nisi sodales. In hac habitasse platea dictumst. Donec purus arcu, sodales vel dictum id, consectetur vel tortor. Duis vehicula ultricies iaculis. Nullam mattis semper metus, et venenatis sapien viverra sed. Proin consequat, tortor ut feugiat scelerisque, massa nunc dignissim augue, ac feugiat nulla nisl non lacus.</p>
</div><!-- end description -->
</div><!-- end wrapper -->
<h2>Lorem Ipsum Dolor Sit Amet </h2>
</div><!-- end gallery-item -->
<div class="gallery-item">
<div class="wrapper">
<div class="link">
<a href="#"></a>
</div><!-- end link -->
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere dui quis enim pretium eu pulvinar nisi sodales. In hac habitasse platea dictumst. Donec purus arcu, sodales vel dictum id, consectetur vel tortor. Duis vehicula ultricies iaculis. Nullam mattis semper metus, et venenatis sapien viverra sed. Proin consequat, tortor ut feugiat scelerisque, massa nunc dignissim augue, ac feugiat nulla nisl non lacus.</p>
</div><!-- end description -->
</div><!-- end wrapper -->
<h2>Lorem Ipsum Dolor Sit Amet </h2>
</div><!-- end gallery-item -->
</body>
</html>
的问题是与.gallery-item .wrapper .link a位。您可以查看工作演示http://www.jacobbearce.com/jquery-animation
它的功能应该像http://www.jacobbearce.com/graphics.php目前所做的（这是使用CSS3）。
啊这个工程！我刚刚从第一个答案中读取了第一个副本，所以我忽略了它。非常感谢你，这是完美的！ – JacobTheDev 2011-05-25 17:13:51