首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >自动触发jquery插件onclick

自动触发jquery插件onclick
EN

Stack Overflow用户
提问于 2017-06-05 22:06:13
回答 0查看 125关注 0票数 0

我有一个jquery插件,当你点击按钮时,它会显示隐藏的div和动画。我已经使用了jquery.fn原型。

这是jquery插件

代码语言:javascript
复制
 (function($) {
            'use strict';
            $.fn.launchBtn = function(options) {
               var mainBtn, panel, clicks, settings, launchPanelAnim, closePanelAnim, openPanel, boxClick, panelBody, panelMedia;
               mainBtn = $(".proactive-chat-button");
               panel = $("#proactive-chat .panel");
               panelMedia = $("#proactive-chat .panel-media");
               panelBody = $("#proactive-chat .panel-body");
               clicks = 0;
               //default settings
               settings = $.extend({
                  openDuration: 600,
                  closeDuration: 200,
                  rotate: true
               }, options);
               //Open panel animation
               launchPanelAnim = function() {
                  $(panel).removeClass('swift-out');
                  $(panelMedia).removeClass('swift-out');
                  $(panelBody).removeClass('swift-out');
                  panel.animate({
                     opacity: "show",
                     width: "show",
                     height: "show",
                  }, settings.openDuration);
                  $(panel).addClass('swift-in');
                  $(panelMedia).addClass('swift-in');
                  $(panelBody).addClass('swift-in');
                  panelMedia.animate({
                     opacity: "show",
                     width: "slideDown",
                     height: "slideDown",
                     transitionDelay: "0.1s"
                  }, settings.openDuration);

                  calculate();
                  $('.proactive-chat-button').addClass('shadow-3');

               };
               //Close panel animation
               closePanelAnim = function() {
                  $(panel).removeClass('swift-in');
                  $(panelMedia).removeClass('swift-in');
                  $(panelBody).removeClass('swift-in');
                  $(panel).addClass('swift-out');
                  $(panelMedia).addClass('swift-out');
                  $(panelBody).addClass('swift-out');
                  panel.animate({
                     opacity: "hide",
                     width: "hide",
                     height: "hide"
                  }, settings.closeDuration);
                  panelMedia.animate({
                     opacity: "hide",
                     width: "slideDown",
                     height: "slideDown",
                     transitionDelay: "0.02s"
                  }, settings.openDuration);
                  $('.proactive-chat-button').removeClass('shadow-3');
                  $('.modal-overlay').fadeOut(100);
               };
               //Open panel and rotate icon
               openPanel = function(e) {
                  if (clicks === 0) {
                     if (settings.rotate) {
                        // $('.proactive-chat-icon').removeClass('rotateBackward').toggleClass('rotateForward');
                     }
                     launchPanelAnim();
                     clicks++;
                  } else {
                     if (settings.rotate) {
                        //$('.proactive-chat-icon').removeClass('rotateForward').toggleClass('rotateBackward');
                     }
                     closePanelAnim();
                     clicks--;
                  }
                  e.preventDefault();
                  return false;
               };
               //Allow clicking in panel
               boxClick = function(e) {
                  e.stopPropagation();
               };
               //Main button click    
               mainBtn.on('click', openPanel);
               //Prevent closing panel when clicking inside
               panel.click(boxClick);
               $('.proactive-chat-icon').click(function() {
                  $('.proactive-chat-icon .procty').toggleClass('proactive-procty-close').toggleClass('proactive-procty');
               });
               $('.panel-heading-button').click(function() {
                  if (clicks === 0) {
                     if (settings.rotate) {
                        // $('.proactive-chat-icon').removeClass('rotateBackward').toggleClass('rotateForward');
                        $('.proactive-chat-icon .procty').toggleClass('proactive-procty-close').toggleClass('proactive-procty');
                     }
                     launchPanelAnim();
                     clicks++;
                  } else {
                     if (settings.rotate) {
                        //$('.proactive-chat-icon').removeClass('rotateForward').toggleClass('rotateBackward');
                        $('.proactive-chat-icon .procty').toggleClass('proactive-procty').toggleClass('proactive-procty-close');
                     }
                     closePanelAnim();
                     clicks--;
                  }
               });
               $(document).click(function() {
                  closePanelAnim();
                  if (clicks === 1) {
                     $('.proactive-chat-icon .procty').toggleClass('proactive-procty').toggleClass('proactive-procty-close');

                  }
                  clicks = 0;
               });
            };
         }(jQuery));

为此,我调用了launchBtn()方法。

代码语言:javascript
复制
 $("#proactive-chat").click().launchBtn({
                    openDuration: 250,
                    closeDuration: 300
                 });

我担心的是,我希望在满足某个间隔或条件时自动触发它。我已经使用了$(‘#proactive-chat’)点击(‘.trigger’)​,但是它不起作用。有什么方法可以自动触发它吗?提前谢谢你。

EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44370840

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档