0

基本的には滑らかなアニメーションを作成しようとしています。.mouseenter がトリガーされると、画像はそのサイズの 2 倍に拡大され、.mouseleave がトリガーされると、画像は元のサイズにスムーズに移行します。

CSS と .addclass および .remove クラスを使用して既にこれを達成していますが、このスキル構築の演習のために、ストック jquery に戻って書き直しています。.mouseenter を理解できなかったため、.mouseleave 関数はまだ作成していません。

しかし、私は明らかに .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

コードに間違っている点がいくつかあります。まず、クラスではなく名前付きのすべてのタグimageに mouseenter イベントをバインドしています(に変更します$('.image'))。

次に、アニメーション関数にフィードするオブジェクトは key:value の形式である必要があり、値はプリミティブ型である必要があるため、アニメーションを次のように変更する必要があります。

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

有効なJavaScriptにするために。

ただし、この場合はまだ機能しません。アニメーションは数値のみをサポートするため、変換のアニメーション化が機能しない理由です。これを解決する jQuery プラグインがいくつかあるかもしれませんが、残念ながらそのようなものは知りません。

任意の属性をアニメーション化してから匿名関数で変換を手動で変更するハックを見たことがありますが、率直に言って、それは間違った方法であり、CSS で簡単に実行できるものにとっては不必要に複雑だと思います。

于 2013-10-30T09:28:33.417 に答える