模拟微信聊天输入框切换效果的实现

功能描述：

点击按钮，按钮向下滑动到页面外，同时输入框向上滑动到页面中。点击页面其他部位，按钮向上滑动到页面中，输入框向下滑动到页面外。

实现的技术点：

给页面其他元素绑定点击事件，判断点击的不是输入框则将输入框隐藏，将输入按钮切换显示。

var commentInputWrapper = document.getElementsByClassName('commentInputWrapper')[0];
        document.body.addEventListener('click',function(){
            　　var that = event.target||event.srcElement;
            　　if(that.parentNode.getAttribute('class')!=('buttonSignNow')&&that.parentNode.getAttribute('class')!=('commentSendButton')&&that.parentNode.getAttribute('class')!=('commentInput')&&that.parentNode.getAttribute('class')!=('commentPicAdd')
                ){
                commentInputWrapper.style.display='none';
                document.getElementById('activityComment').style.display='block';
            };
        },false);

 效果改进版（使用jquery增加了动画），并且隐藏状态由display:none;改为了bottom:-56px（按钮栏和输入框栏的高度）;

$(document).ready(function(){

            document.body.addEventListener('click',function(){
            var that = event.target||event.srcElement;
            if(that.parentNode.getAttribute('class')!=('buttonCommentNow')&&that.parentNode.getAttribute('class')!=('commentSendButton')&&that.parentNode.getAttribute('class')!=('commentInput')&&that.parentNode.getAttribute('class')!=('commentPicAdd')
                ){
                $('.commentInputWrapper').animate({bottom:'-56px'},200,function(){
                        $('.buttonCommentNow').animate({bottom:'0px'},200);
                    });
            };
        },false); 
            });