jquery的animate的使用

最新推荐文章于 2024-07-25 11:26:35 发布

yi_an

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量320

点赞数

文章标签： jquery html 前端

本文链接：https://blog.csdn.net/yi_an/article/details/50932484

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../jquery-1.12.1.js"></script>
<script type="text/javascript">
   $(function(){
           $(':text').focus(function(){
                   $(this).addClass('focus');
               }).blur(function(){
                   $(this).removeClass('focus');
                   });
           var $comment = $("#comment");
           var $but = $('button');
           var $tt = $('#tt');
           var $tt1 = $('#tt1');
           console.log($but);
           if(!$comment.is(":animated")){
               $tt.click(function(){
                       $comment.animate({height:"+=50",width:"+=60"},300);
                   })
               }

           if(!$comment.is(":animated")){
               $tt1.click(function(){
                       $comment.animate({height:"-=50",width:"-=60"},300);
                   })
               }
       })
</script>
<style type="text/css">
   .focus{
       background-color:#00C;
       border:#F00 solid 5px;}
       textarea{
           height:300px;
           width:200px;
           resize: none;}

</style>
</head>

<body>
   <form>
       <input type="text" value=''/><br />
        <input type="password" /><br />

        <textarea id="comment" placeholder="test" rows="8" cols="20"></textarea>
        <button id="but" value="click">click</button>
        <p id="tt">bigger</p>
         <p id="tt1">smaller</p>
    </form>

</body>
</html>