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