jQuery Simple Example

by Krishna Jadhav

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="400px" height="400px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
         <path class="path" fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
            c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
            c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
            c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
            c19.17,28.697,49.512,49.927,78.596,67.591"/>
         <path class="dashed" fill="none" stroke="white" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
            c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
            c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
            c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
            c19.17,28.697,49.512,49.927,78.596,67.591"/>
      </svg>
      <input type="button" id="button" value="Animate" />

CSS

.dashed{
            stroke-dasharray: 10;
         }
         .path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000; 
             
         }
         @keyframes dash {
            from {
               stroke-dashoffset: 1000;
            }
            to {
               stroke-dashoffset: 0;
            }
         }

JavaScript

$("#button").click(function() {
          $('.path').css("animation"," dash 5s linear");
          $(this).attr("disabled","disabled");
         });