Ripples are created by the local function named `Trigger` inside of the library. Since it's locally declared, we can't execute it directly, but we can add a custom event type in the `options.on` setting.

The only road bump we'll hit is that all ripples **must come from somewhere** (*both intuitively and programatically*), and the trigger function will rely on getting this info from the event coordinates passed in like this [ripple.js#L107][1]:



    var x = e.pageX - $this.offset().left - $ripple.width() / 2;
    var y = e.pageY - $this.offset().top - $ripple.height() / 2;

To fake this, we'll have to build and [trigger][6] our own custom [jQuery Event object][2] from scratch and then stub out the `pageX` and `pageY` properties by finding the center our our new object using [`$.offset`][3], [`.outerWidth()`][4], and [`.outerHeight()`][5] like this 



<pre><code>$.ripple(".btn", {
  on: 'mousedown <b>ripple</b>', // The event(s) to trigger a ripple effect
});

function InvokeRipple($el) {
  var event = jQuery.Event("<b>ripple</b>");
  event.<b>pageX</b> = $el.offset().left + $el.outerWidth() / 2;
  event.<b>pageY</b> = $el.offset().top + $el.outerHeight() / 2;
  $($el).<b>trigger</b>(event)
}
</code></pre>

### Demo in [jsFiddle][7] & Stack Snippets






    $.ripple(".btn", {
      on: 'mousedown ripple', // The event to trigger a ripple effect
      opacity: 0.4,    // The opacity of the ripple
      color: "auto",   // Set the background color. "auto" will use the text color
      duration: 0.7,   // The duration of the ripple
      easing: 'linear' // The CSS3 easing function of the ripple
    });

    $("#click").click(function() {
      InvokeRipple($("#info"))
    });

    function InvokeRipple($el) {
    	var event = jQuery.Event("ripple");
      event.pageX = $el.offset().left + $el.outerWidth() / 2;
      event.pageY = $el.offset().top + $el.outerHeight() / 2;
      $($el).trigger(event)
    }





    body {
      padding: 15px;
    }



    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
      

    <button class="btn btn-primary btn-lg" id="click" >Invoke Ripple on other button</button>
    <button class="btn btn-info btn-lg" id="info" >More Info</button>




[1]: https://github.com/jakiestfu/Ripple.js/blob/v1.2.1/src/ripple.js#L107
[2]: https://api.jquery.com/category/events/event-object/
[3]: https://api.jquery.com/offset/
[4]: https://api.jquery.com/outerwidth/
[5]: https://api.jquery.com/outerheight/
[6]: https://api.jquery.com/trigger/
[7]: https://jsfiddle.net/KyleMit/7dsu3qnd/4/

**Ripple.JS** ([GitHub][1] | [Demo][2] | [CDN][3]) adds a Material style ripple to HTML Elements like this:



    $.ripple(".btn", {
      on: 'mousedown', // The event to trigger a ripple effect
      opacity: 0.4,    // The opacity of the ripple
      color: "auto",   // Set the background color. "auto" will use the text color
      duration: 0.7,   // The duration of the ripple
      easing: 'linear' // The CSS3 easing function of the ripple
    });

### *Q: Is there a way to programmatically invoke  this?*

**Demo in [jsFiddle][5] & Stack Snippets**





    $.ripple(".btn", {
      on: 'mousedown', // The event to trigger a ripple effect
      opacity: 0.4,    // The opacity of the ripple
      color: "auto",   // Set the background color. "auto" will use the text color
      duration: 0.7,   // The duration of the ripple
      easing: 'linear' // The CSS3 easing function of the ripple
    });



    body {
      padding: 15px;
    }



    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
      

    <button class="btn btn-primary btn-lg" >Click Me</button>





[1]: https://github.com/jakiestfu/Ripple.js
[2]: http://jakiestfu.github.io/Ripple.js/demo/
[3]: https://cdnjs.com/libraries/Ripple.js
[4]: https://i.stack.imgur.com/GttQR.gif
[5]: https://jsfiddle.net/KyleMit/7dsu3qnd/3/