javascript - Smooth image resize Using Jquery .animation, and scale

Basically I am attempting to create a smooth animation. When .mouseenter is triggered the image will expand to twice it's size and when .mouseleave is triggered the image will smoothly transition to it's original size.

I have already achieved this using CSS and .addclass and .remove class, but for the purpose of this skill building excersize I am going back and rewriting it in stock jquery. I have not written the .mouseleave function yet as I couldnt figure out the .mouseenter

But I am clearly writing the .mouseenter event wrong.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="stylesheets/960_12_col.css" rel="stylesheet">
    <script src=".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>

But I am clearly writing the .mouseenter event wrong.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="stylesheets/960_12_col.css" rel="stylesheet">
    <script src="http://code.jquery./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>

Share Improve this question edited Oct 30, 2013 at 8:37 asked Oct 30, 2013 at 8:15 nope 1771 gold badge4 silver badges16 bronze badges

EDIT: Well I just realized since I am using a grid system I dont need to really define a Length and width...i think – nope Commented Oct 30, 2013 at 8:21

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

There are a few things that are wrong with your code. First of all, you are binding your mouseenter event on all tags named image and not the class (change it to $('.image')).

Secondly, your object that you feed into your animate function must be in the form key:value and the values must be primitive types, thus you need to change your animation to

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

in order to make it valid javascript.

However, in this case it will still not work, since animate only supports numerical values, why animating transforms simply doesn't work. There might be some jQuery plugins that solve this, but I'm sadly unaware of anything like that.

While I have seen some hacks where you animate some arbitrary attribute and then manually change the transform with an anonymous function, but frankly I think it's the wrong way to go and unnecessarily plex for something that can easily be done with CSS.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Smooth image resize Using Jquery .animation, and scale - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)