Gradual animated panning on a Leaflet map, with stop button

HTML

<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<div class="btn-group">
    <button class="btn" onclick="PanSantaBarbara()">Santa Barbara</button>
    <button class="btn" onclick="PanLosAngeles()">Los Angeles</button>
    <button class="btn" onclick="StopPan()">Stop Panning</button>
</div>
<div id="map" style="height: 400px"></div>

JavaScript

var map = new L.Map('map').setView([34.2, -119], 10);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

PanSantaBarbara = function () {
    map.setView([34.42, -119.7], map.getZoom(), {
        "pan": {
            "animate": true,
                "duration": 10
        }
    });
}

PanLosAngeles = function () {
    map.setView([34.05, -118.25], map.getZoom(), {
        "pan": {
            "animate": true,
                "duration": 10
        }
    });
}

StopPan = function () {
    map.setView(map.getCenter(), map.getZoom(), {
            "animate": false
    });
}