左侧手拉面板特效

//html代码

   <div class='wmsLefthidden'>
        <div class='wmsDrag'>
            ![](/images/model/1_1.jpg)
        </div>
        <div class='wmsDrag2'>
            ![](/images/model/1_2.jpg)
        </div>
        <div class='wmsText'>关于我们</div>
        <div class="showUs">
            <h2>埃森焊割设备及配件营销中心</h2>
            <p>本中心成立于2005年，从事于焊割设备及配件销售服务十余年，年销售额达1000万元。十年老店，能够全面掌握全国焊割配件质量，始终真诚实意的为新老客户提供价格实惠、质量可靠的产品与服务。</p>
            <p><i>主营产品：</i>各品牌电焊机、氩弧焊机、自动化工装、机器人焊接设备；批发各种优质焊割配件、焊接器材：二保焊焊枪、送丝机、割炬、二氧化碳表、等离子割枪、氩弧焊枪、焊钳、焊罩、焊机线、焊条、焊丝、磨光机、防堵膏、防溅剂、氧气管等及各种焊机维修。</p>
            <p>商品详情及购买请访问: <i><a href="javascript:void(0);" onclick="window.open('https://shop115264735.taobao.com/?spm=a230r.7195193.1997079397.113.BIx9G0')"> 淘宝网上商城</a></i> </p>
        </div>
    </div>

// 左侧手拉面板jquery代码--------------------------------------

$('.wmsDrag').on('mousedown', function(e) {
        $(document).on('mousemove.drag', function(e) {
            e.preventDefault();
            $('.wmsLefthidden').offset({
                left: e.pageX - 325
            });
        });

        $(document).on('mouseup', function(e) {
            $(document).off('mousemove.drag');
            $('.wmsLefthidden').stop().animate({
                'top': '150px',
                'left': document.body.clientWidth/2 -300 ,
                'width': '600px',
                "border-radius":"40px",
            }, 500);
            $(document).off('mouseup')
            setTimeout(function() {
                $('.wmsDrag').css('display', 'none');
                $('.wmsDrag2').css('display', 'block');
                $(".wmsText").css("display", "none")
                $(".showUs").css("display", "block")

            }, 500)
        });

    });
    $('.wmsDrag2').click(function() {
        $(".showUs").css("display", "none")
        $(".wmsText").css("display", "block")
        $('.wmsLefthidden').stop().animate({
            'top': '150px',
            'left': '-300px',
            'width': '300px',
            "border-radius":"0"
        }, 500);
        setTimeout(function() {
            $('.wmsDrag').css('display', 'block');
            $('.wmsDrag2').css('display', 'none');
            $('.wmsText').text('关于我们');
            // $('.wmsText').css('width', '300px')
        }, 500)
    });