三个JS类合为一体?

时间:2018-10-14 18:49:10

标签: javascript css

我有一个选项卡式表单,其中加载了淡入淡出的动画效果,“下一步”按钮执行3项操作。

  1. 带您进入下一个选项卡(类'sw-btn-next',href'#step-2')

  2. 滚动到页面顶部(类“ scrollToTop”)

  3. 触发动画在页面上开始播放(类“ animatedClick”,数据目标“ clickStep2”)。

    <button type="button" href="#step-2" data-target='clickStep2' class="animated fadeIn animatedClick btn btn-primary sw-btn-next float-right scrollToTop" data-id='5' data-sequence='1500'>Next</button>

我认为必须有更好的方法吗?我对javascript不太熟练。

*此外,由于此代码有效,因此...有任何方法可以使这些动画在触发时只播放一次。如果我返回一个选项卡,它将再次启动动画。


scrollToTop JS

                                    $(document).ready(function(){

                                    //Click event to scroll to top
                                    $('.scrollToTop').click(function(){
                                        $('html, body').animate({scrollTop : 0},800);
                                        return false;
                                    });

                                });

sw-btn-next

            _setElements: function() {
            this.main.addClass("sw-theme-" + this.options.theme), this.nav.addClass("nav nav-tabs step-anchor").children("li").addClass("nav-item").children("a").addClass("nav-link"), this.options.anchorSettings.enableAllAnchors !== !1 && this.options.anchorSettings.anchorClickable !== !1 && this.steps.parent("li").addClass("clickable"), this.container.addClass("sw-container tab-content"), this.pages.addClass("tab-pane step-content");
            var e = this;
            return this.options.disabledSteps && this.options.disabledSteps.length > 0 && t.each(this.options.disabledSteps, function(t, i) {
                e.steps.eq(i).parent("li").addClass("disabled")
            }), this.options.errorSteps && this.options.errorSteps.length > 0 && t.each(this.options.errorSteps, function(t, i) {
                e.steps.eq(i).parent("li").addClass("danger")
            }), this.options.hiddenSteps && this.options.hiddenSteps.length > 0 && t.each(this.options.hiddenSteps, function(t, i) {
                e.steps.eq(i).parent("li").addClass("hidden")
            }), !0
        },
        _setToolbar: function() {
            if ("none" === this.options.toolbarSettings.toolbarPosition) return !0;
            var e = this.options.toolbarSettings.showNextButton !== !1 ? t("<button></button>").text(this.options.lang.next).addClass("btn btn-primary sw-btn-next scrollToTop").attr("type", "button") : null,
                i = this.options.toolbarSettings.showPreviousButton !== !1 ? t("<button></button>").text(this.options.lang.previous).addClass("btn btn-secondary sw-btn-prev").attr("type", "button") : null,
                n = t("<div></div>").addClass("btn-group mr-2 sw-btn-group").attr("role", "group").append(i, e),
                r = null;
            this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0 && (r = t("<div></div>").addClass("btn-group mr-2 sw-btn-group-extra").attr("role", "group"), t.each(this.options.toolbarSettings.toolbarExtraButtons, function(t, e) {
                r.append(e.clone(!0))
            }));
            var a, o;
            switch (this.options.toolbarSettings.toolbarPosition) {
                case "top":
                    a = t("<div></div>").addClass("btn-toolbar hidden sw-toolbar sw-toolbar-top justify-content-" + this.options.toolbarSettings.toolbarButtonPosition), a.append(n), "start" === this.options.toolbarSettings.toolbarButtonPosition ? a.prepend(r) : a.append(r), this.container.before(a);
                    break;
                case "bottom":
                    o = t("<div></div>").addClass("btn-toolbar hidden sw-toolbar sw-toolbar-bottom justify-content-" + this.options.toolbarSettings.toolbarButtonPosition), o.append(n), "start" === this.options.toolbarSettings.toolbarButtonPosition ? o.prepend(r) : o.append(r), this.container.after(o);
                    break;
                case "both":
                    a = t("<div></div>").addClass("btn-toolbar hidden sw-toolbar sw-toolbar-top justify-content-" + this.options.toolbarSettings.toolbarButtonPosition), a.append(n), "start" === this.options.toolbarSettings.toolbarButtonPosition ? a.prepend(r) : a.append(r), this.container.before(a), o = t("<div></div>").addClass("btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-" + this.options.toolbarSettings.toolbarButtonPosition), o.append(n.clone(!0)), null !== r && ("start" === this.options.toolbarSettings.toolbarButtonPosition ? o.prepend(r.clone(!0)) : o.append(r.clone(!0))), this.container.after(o);
                    break;
                default:
                    o = t("<div></div>").addClass("btn-toolbar hidden sw-toolbar sw-toolbar-bottom justify-content-" + this.options.toolbarSettings.toolbarButtonPosition), o.append(n), "start" === this.options.toolbarSettings.toolbarButtonPosition ? o.append(r) : o.append(r), this.container.after(o)
            }
            return !0
        },

使用http://jackonthe.net/css3animateit/的动画

0 个答案:

没有答案