I'm trying to build a jquery method of animating divs to make my website compatible with older browsers (currently using CSS3), but I'm having a weird issue where a both instances of a div class on a page are being resized on hover. I'm using this in the code so it should only animate the div that's being hovered over, like the other divs that are changes, but for some reason it's not.
The code is
<!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 metu开发者_JS百科s, 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>
The issue is with the .gallery-item .wrapper .link a bit. You can view a working demo at http://www.jacobbearce.com/jquery-animation
It's supposed to function like http://www.jacobbearce.com/graphics.php currently does (this is using CSS3).
This:
$('a', '.link', '.wrapper', this)
$('.description', '.wrapper', this)
Should be:
$('.wrapper .link a', this)
$('.wrapper .description', this)
This will fix the starting and end points of the animation.
However, the animation jumps and slows way down, due to the transition, -khtml-transition, etc. declarations in the CSS!
Eliminate those declarations to smooth the animation and to avoid "float jump" problems in this case.
I believe these:
$('a', '.link', '.wrapper', this)
$('.description', '.wrapper', this)
Should be:
$('a, .link, .wrapper', this)
$('.description, .wrapper', this)
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论