jQuery Turnbox.JS - 没有用户交互的动画

时间:2015-10-20 07:39:43

标签: javascript jquery

我真的很喜欢使用KeiichiroHirai的Turnbox.JS脚本(http://www.noht.co.jp/turnbox),

但是,此脚本似乎只适用于用户单击/悬停此脚本附加到的任何按钮。

我希望在DOM准备就绪时使用这些动画,

我试过了:

$(function() {
     $.turnBoxLink({
      box: ".example"
    });
});

但是因为我在这里发帖,显然不起作用。

提前谢谢!

3 个答案:

答案 0 :(得分:3)

如果您希望在DOM准备就绪时执行此操作,则应将init代码包装到

$(document).ready(function() {
   // go when DOM is ready
});

$(window).load(function() {
   // go when page and images are loaded
});

此外,Turnbox可以像这样初始化:

HTML标记

<div class='login_form'>
   <h3>My form element<h3>
</div>

使用以下代码,您将获得额外的简单示例,而无需任何选项。但出于测试目的,从这里开始可能会很好:

$(".login_form").turnBox();

如果现在,您想要在特定事件(例如准备或加载事件)中启动动画,您可以使用以下方式执行此操作:

$(".login_form").turnBoxLink({
  box: ,
  events: "ready", // you can also try 'load'
  dist: "next"
});

答案 1 :(得分:1)

初始化后,单击生成的.turnBoxButton子元素:

$.turnBoxLink({
    box: ".example"
});
setInterval(function() {
    $(".example .turnBoxButton").click();
}, 1000);

这会每秒旋转一下这个盒子。

答案 2 :(得分:0)

如果您想以编程方式使用jQuery触发元素上的click事件您可以使用.click()函数。

$(document).ready(function() {
   $('.sample').turnBox();
   ...
   $('.sample').click();
});