Fatal编程技术网
  • javascript/
  • Javascript 使用Jquery.animation和scale平滑图像大小

Javascript 使用Jquery.animation和scale平滑图像大小

javascript jquery image animation

Javascript 使用Jquery.animation和scale平滑图像大小,javascript,jquery,image,animation,transformation,Javascript,Jquery,Image,Animation,Transformation,基本上，我正在尝试创建一个平滑的动画。当触发.mouseenter时，图像将扩展到其大小的两倍；当触发.mouseleave时，图像将平滑过渡到其原始大小 我已经使用CSS和.addclass和.remove类实现了这一点，但是为了这个技能培养练习的目的，我将返回并在stock jquery中重写它。我还没有编写.mouseleave函数，因为我无法理解.mouseenter 但我显然把.mouseenter事件写错了 <!doctype html> <html> <

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

我已经使用CSS和.addclass和.remove类实现了这一点，但是为了这个技能培养练习的目的，我将返回并在stock 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> 


身体{
字体大小：62.5%；
背景：url（'images/vintageocean.jpg'）无重复中心固定；
}   
#画廊{
垫顶：10em；
}   
.第一排{
边缘底部：15em；
}   
$（文档）.ready（函数（）{
$（“.image”）.css（{width:'20em'，height:'20em'}）；
$（“图像”）.mouseenter（函数（）{
$（this.stop（）.animate（{transform，scale（2）}，3000）；
}); 
});

您的代码有一些地方出错。首先，您要将mouseenter事件绑定到名为
image
的所有标记上，而不是类上（将其更改为
$（'.image'）
）

其次，输入到动画函数中的对象必须是形式键：值，并且值必须是基本体类型，因此需要将动画更改为

$(this).stop().animate({transform:'scale(2)'}, 3000);
为了使它成为有效的javascript

但是，在这种情况下，它仍然不起作用，因为“动画”仅支持数值，所以设置变换动画根本不起作用。也许有一些jQuery插件可以解决这个问题，但遗憾的是，我没有意识到类似的事情

虽然我见过一些黑客，你可以设置一些任意属性的动画，然后用匿名函数手动更改变换，但坦率地说，我认为这是一种错误的方式，对于一些可以用CSS轻松完成的事情来说，这是不必要的复杂。

EDIT：我刚刚意识到，因为我使用的是网格系统，所以我不需要真正定义长度和宽度……我想谢谢你，我找到了很多插件，我只是想在不使用任何插件的情况下完成这项工作。我相信使用transit或jQueryUI插件可以很容易地做到这一点