Question

基本上我正在尝试创建一个流畅的动画。触发.mouseenter时，图像将扩展到其大小的两倍，当触发.mouseleave时，图像将平滑过渡到原始大小。

我已经使用CSS和.addclass和.remove类实现了这一点，但是为了这个技能构建的目的，我要回去并在库存jquery中重写它。我还没有编写.mouseleave函数，因为我无法找出.mouseenter

但我明确写错了.mouseenter事件。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="stylesheets/960_12_col.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        body {
            font-size:62.5%;
            background:url('images/vintageocean.jpg')no-repeat repeat center fixed;
        }   

        #gallery {
            padding-top:10em;
        }   


        .first_row {
            margin-bottom:15em;
        }   

    </style>

    <script>

    $(document).ready(function() {
        $(".image").css({width : '20em', height : '20em'}); 

        $("image").mouseenter(function() {
            $(this).stop().animate({transform, scale(2)}, 3000);
        }); 
    }); 



    </script>
</head>
<body>
    <div id="wrapper" class="container_12">

        <section id="gallery">          
            <img id="avery" class=" image first_row prefix_2 grid_3 suffix_1" src='images/OAI.jpg' alt= "On Avery Island Album Art">
            <img id="overthesea" class=" image first_row prefix_1 grid_3 suffix_2" src='images/ITAOTS.jpg' alt="In the Aeroplane Over the Sea album art">   
            <img id="beauty" class=" image second_row prefix_2 grid_3 suffix_1" src='images/beauty.jpg' alt="Beauty Demo Album Art">
            <img id="everthingIs" class=" image second_row prefix_1 grid_3 suffix_2" src='images/everythingis.jpg' alt="Eveything Is EP Album Art">
        </section>
    </div>  
</body>

Answer 1

您的代码有一些问题。首先，您要在名为image的所有标记上绑定您的mouseenter事件而不是类（将其更改为$('.image')）。

其次，您提供给animate函数的对象必须采用key：value形式，并且值必须是基本类型，因此您需要将动画更改为

$(this).stop().animate({transform:'scale(2)'}, 3000);

为了使其成为有效的javascript。

然而，在这种情况下，它仍然不起作用，因为animate仅支持数值，为什么动画变换根本不起作用。可能有一些jQuery插件可以解决这个问题，但我很遗憾没有意识到这一点。

虽然我已经看到了一些黑客，你动画一些任意属性，然后用匿名函数手动更改转换，但坦率地说，我认为这是错误的方式，并且对于可以用CSS轻松完成的事情而言不必要地复杂。 / p>

平滑图像调整大小使用Jquery .animation和缩放

1 个答案: