Я пытаюсь создать метод jquery для анимации div, чтобы сделать мой веб-сайт совместимым со старыми браузерами (в настоящее время использующими CSS3), но у меня возникает странная проблема, когда оба экземпляра класса div на странице находятсяизменил размер при наведении.Я использую this в коде, поэтому он должен анимировать только div, который находится над ним, как и другие 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).