Question

我正在尝试构建一个动画div的jquery方法，以使我的网站与旧浏览器兼容（目前使用的是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&nbsp;</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&nbsp;</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）。

Answer 1

此：

$('a', '.link', '.wrapper', this)
$('.description', '.wrapper', this)

应该是：

$('.wrapper .link a', this)
$('.wrapper .description', this)

这将修复动画的起点和终点。

然而，由于CSS中的transition，-khtml-transition等声明，动画会跳跃并减慢速度。

在这种情况下，消除这些声明以平滑动画并避免“浮动跳跃”问题。

Answer 2

我相信这些：

$('a', '.link', '.wrapper', this)
$('.description', '.wrapper', this)

应该是：

$('a, .link, .wrapper', this)
$('.description, .wrapper', this)

为什么这个jQuery为这个div类的两个实例设置动画？

2 个答案: