flare.jquery.jsというプラグインのイベントをクリックからページ読み込み後、自動で動作に変更したい

前提・実現したいこと

初めて質問をさせていただきます。flare.jquery.jsというプラグインのイベントをクリックからページ読み込み後、自動で動作に変更したいのですが、どうすればいいのか全く分からず、困っています。
不躾な質問の仕方をしているのは重々承知なのですが、お力添えをいただけたら幸いです。

該当のソースコード

ファイル内のコードにこのように記載があり、action: "click"の部分を変えればいいのかなと思っていたのですが、何をどうすればいいのかよく分かりません。


  $.fn.flare = function(options) {

   // Set default values
    var defaults = $.extend({
            target: this,
            action: "click",
            backgroundColor: "#fff",
            speed: 1500,
            glowDensity: 14  
        }, options ); 
コード

試したこと

ここに問題に対して試したことを記載してください。
clickの部分をいろいろ変えてみました。
onloadとかloadとか。。。
そもそも目の付け所が違うような気がします。

補足情報（念の為全文を貼り付けます。）


  $.fn.flare = function(options) {

   // Set default values
    var defaults = $.extend({
            target: this,
            action: "click",
            backgroundColor: "#fff",
            speed: 1500,
            glowDensity: 14  
        }, options ); 

  // Flare Unit
  var unit = 0;

  var obj = $(defaults.target);  

  // Execute 
  $(this).bind( defaults.action, function(){ 

    // Increment flare count
    unit++;

    // Create flare element
    $('body').append('<div id="tr-flare' + unit + '"><div class="tr-burst1"></div><div class="tr-burst2"></div><div class="tr-burst3"></div><div class="tr-burst4"></div><div class="bg-ver tr-glow"></div><div class="bg-hor tr-glow"></div>');

        // Set burst tyles
        $('.tr-glow')
          .css({ 'box-shadow' : '0 0 40px ' + defaults.glowDensity + 'px ' + defaults.backgroundColor })
          .css({ '-moz-box-shadow' : '0 0 40px ' + defaults.glowDensity + 'px ' + defaults.backgroundColor })
          .css({ '-webkit-box-shadow' : '0 0 40px ' + defaults.glowDensity + 'px ' + defaults.backgroundColor });

        $('.bg-ver')
          .css({ position: 'absolute' })
          .css({ top: 40 })
          .css({ left: 60 })
          .css({ width: 0 })
          .css({ height: 20 })
          .css({ 'z-index': 9997 });

        $('.bg-hor')
          .css({ position: 'absolute' })
          .css({ top: 50 })
          .css({ left: 15 })
          .css({ height: 0 })
          .css({ width: 90 })
          .css({ 'z-index': 9997 });

     $('.tr-burst1, .tr-burst2, .tr-burst3, .tr-burst4')
          .css({ position: 'absolute' })
          .css({ top: 50 })
          .css({ left: 50 })
          .css({ height: 1 })
          .css({ width: 20 })
          .css({ background: '#fff' })
          .css({ 'z-index': 9999 })
          .css({ 'box-shadow': '0 0 8px 3px #fff' })
          .css({ '-moz-box-shadow': '0 0 8px 3px #fff' }) 
          .css({ '-webkit-box-shadow': '0 0 8px 3px #fff' });

        $('.tr-burst1').css({ left: 30, width: 60 });

        // rotate bursts
        $('.tr-burst2')
          .css({ 'transform': 'rotate(45deg)' })
          .css({ '-webkit-transform': 'rotate(45deg)' })
          .css({ '-moz-transform': 'rotate(45deg)' })
          .css({ '-o-transform': 'rotate(45deg)' })
          .css({ '-ms-transform': 'rotate(45deg)' });
        $('.tr-burst3')
          .css({ 'transform': 'rotate(90deg)' })
          .css({ '-webkit-transform': 'rotate(90deg)' })
          .css({ '-moz-transform': 'rotate(90deg)' })
          .css({ '-o-transform': 'rotate(90deg)' })
          .css({ '-ms-transform': 'rotate(90deg)' });
        $('.tr-burst4')
          .css({ 'transform': 'rotate(-45deg)' })
          .css({ '-webkit-transform': 'rotate(-45deg)' })
          .css({ '-moz-transform': 'rotate(-45deg)' })
          .css({ '-o-transform': 'rotate(-45deg)' })
          .css({ '-ms-transform': 'rotate(-45deg)' });
           
    // Get target's dimensions
    var myPos = obj.offset();
    var myWidth = obj.outerWidth();
    var myHeight = obj.outerHeight();

     // Animate the flare
       $('#tr-flare'+ unit)
          // set starting position of flare's center point to target's corner
          .css({position: 'absolute', display: 'none', top: myPos.top-50, left: myPos.left-55})
          .fadeIn({ queue: false, duration: 250 })
          .animate({
              left: (myWidth*.8)+myPos.left-55
          },  defaults.speed, 'linear', function() {
                $(this).animate({
                  opacity: 0,
                  left: myWidth+myPos.left-55
                }, defaults.speed/2, 'linear', function() {
                   this.parentNode.removeChild(this);
                });
            });

  }); // end bind
    //to allow chaining
    return this;
  }

})( jQuery );

コード

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

プラグインのコードを変えるよりも、ページ読み込み後にclickイベントを.triggerで発動させてあげればいいのではないでしょうか。

オプションのaction: 'click'をaction: 'load'とかにすればでできるようになってたりするのがよくある仕様なのですが、そういう説明が見当たらなかったので、まぁこれでもいいと思います。

###ページ読み込み後に実行

html
1<button type="button">button</button>
2<p class="message">message</p>

jQuery
1// flareを実行
2$('button').flare({
3    target: '.message',
4    action: 'click',
5    backgroundColor: '#0f0',
6    speed: 1000,
7    glowRadius: '15'});
8  
9// ページ読み込み時にclick
10$(window).on('load', function() {
11    $('button').trigger('click');
12});

上記実行サンプル

###ページ読み込みの1秒後に実行
または下記のようにすれば、ページ読み込みの1秒後に実行されます。

jQuery
1// ページ読み込みの1秒後にclick
2$(window).on('load', function() {
3    setTimeout(function(){
4        $('.click').trigger('click');
5    },1000);
6});

###ボタン自体不要な場合
すみませんひょっとして、そもそもボタン自体いらなかったでしょうか。でしたら力技ですがこうとかいかがでしょう。

html
1<p class="message">message</p>

jQuery
1// flareを実行
2myflare = function(){
3  $('button').flare({
4      target: '.message',
5      action: 'click',
6      backgroundColor: '#0f0',
7      speed: 1000,
8      glowRadius: '15'});
9}
10// ページ読み込み時にボタンを挿入してflareを実行してclickしてボタンを削除
11$(window).on('load', function() {
12      $('body').append('<button stype="display:none;" type="button"></button>');
13      myflare();
14      $('button').trigger('click').remove();
15});