0

基本上我正在尝试创建一个流畅的动画。当 .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>

4

1 回答 1

2

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

其次，您输入动画函数的对象必须采用 key:value 形式，并且值必须是原始类型，因此您需要将动画更改为

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

为了使它有效的javascript。

但是，在这种情况下它仍然不起作用，因为 animate 只支持数值，为什么动画转换根本不起作用。可能有一些 jQuery 插件可以解决这个问题，但遗憾的是我不知道这样的事情。

虽然我已经看到了一些技巧，您可以为任意属性设置动画，然后使用匿名函数手动更改转换，但坦率地说，我认为这是错误的方法，并且对于可以使用 CSS 轻松完成的事情来说，这是不必要的复杂。

于 2013-10-30T09:28:33.417 回答