我有一个选项卡式表单,其中加载了淡入淡出的动画效果,“下一步”按钮执行3项操作。
带您进入下一个选项卡(类'sw-btn-next
',href'#step-2
')
滚动到页面顶部(类“ scrollToTop
”)
触发动画在页面上开始播放(类“ 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
},