高德地图的开始站和结束站

html

<form>
            <label>起始站：<input tyep="text" placeholder="请输入你的起始站" id="start"></label>
            <span id="transform" class="transform">点我看看</span>
            <br/>
            <labe>
                终点站：<input type="text" placeholder="请输入你的终点站" id="end">
            </labe>

        </form>

css

input {
            position: relative;
            margin: 30px;
        }

js

var flag = true;
    $('#transform').click(function() {
        if($('#transform').hasClass('transform')) {
            $('#start').animate({
                top: '85px'
            }, 'ease');
            $('#end').animate({
                top: '-85px'
            }, 'ease');
            $(this).removeClass('transform');
            flag==false;
        } else {
            $('#start').animate({
                top: '-5px'
            }, 'ease');
            $('#end').animate({
                top: '5px'
            }, 'ease');
            $(this).addClass('transform');
            flag==true;
        }
    })

遮罩层：

 opacity: .5;
 filter: alpha(opacity:50);