原创

jQuery animate()改变div大小

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44552202/article/details/88929878

开发工具与关键技术:jQuery,MVC
作者:刘俊杰
撰写时间:2019年03月26日

jQuery animate()语法:$(selector).animate({params},speed,callback);
jQuery animate() 方法用于创建自定义动画;
jQuery animate()定义相对值,只需要在值的前面加上+=或-=;
下面讲一个关于jQuery animate定义相对值的案例

<html>
<head>
<style>
.a {
border :1px solid #000;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="a" id="a"></div>
<div id="big">+</div>
    <div id="smila">-</div>
    <script src="~/bootstrap-3.3.7-dist/js/jquery-2.0.3.min.js"></script>
    <script> 
        $("#big").click(function () {//点击big放大图片
            $("#a").animate({ width: "+=10%" }, 100);//后面100等于执行时间
        })
        $("#smila").click(function () {//点击smile缩小图片
            $("#a").animate({ width: "-=10%" }, 100);
        })
    </script>
</body>
</html>

上面根据jQuery animate()相对值来改变div的大小,首先我们先定义一个文本框在文本框里面添加样式,添加两个div,把两个div设置为点击事件,然后获取到需要改变的div的id,后面添加animate函数宽度设置为+=10%,因为是设置为+=10%所有会同时改变div的大小后面的100是改变时长。

文章最后发布于: 2019-03-31 15:44:56
展开阅读全文
0 个人打赏

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览