动画。在使用 .click jQuery 的模板上，我尝试将其更改为 .delay，这样我就不需要点击该元素，这样它就会在之后进行动画处理几秒钟。但这是行不通的。将不胜感激。
来源(下)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Split Flap</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery/jquery.splitflap.js"></script>
<style>
body {
margin: 0;
padding: 20px;
background: grey;
color: white;
font-family: Tahoma, Geneva, sans-serif;
font-size: 24px;
}
.example {
padding: 0 0 10px;
margin-bottom: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
h1 {
margin: 0 0 10px;
padding: 10px;
font-size: 16px;
font-weight: normal;
background: #333333;
}
.splitflap {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="example">
<h1>Simple Split-Flap</h1>
<div class="do-splitflap">Hello World !</div>
<div class="do-splitflap">Testing this sh?t</div>
<div class="resized-splitflap">PHILIP</div>
<div class="resized-splitflap">PINES?</div>
</div>
<div class="example">
<h1>Autoplay disabled</h1>
<div class="click-splitflap">It s nice</div>
</div>
<div class="example">
<h1>JS-set text</h1>
<div class="empty-splitflap"></div>
</div>
<div class="example">
<h1>Modified size</h1>
<div class="resized-splitflap">It s a Small World</div>
</div>
<script>
(function($) {
$(document).ready(function() {
$('.do-splitflap')
.splitFlap();
$('.click-splitflap')
.splitFlap({
textInit: 'Click me ',
autoplay: false,
onComplete: function() {
console.log('Done !');
}
})
.click(function() {
$(this).splitFlap('splitflap').animate();
});
$('.empty-splitflap')
.splitFlap({
text: 'This is JS'
});
var ratio = 0.5;
$('.resized-splitflap')
.splitFlap({
charWidth: 50 * ratio,
charHeight: 100 * ratio,
imageSize: (2500 * ratio) + 'px ' + (100 * ratio) + 'px'
});
});
})(jQuery);
</script>
<a href="https://github.com/zemax/jquery-splitFlap"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</body>
</html>
专注于这部分代码:
$('.click-splitflap')
.splitFlap({
textInit: 'Click me ',
autoplay: false,
onComplete: function() {
console.log('Done !');
}
})
.click(function() {
$(this).splitFlap('splitflap').animate();
});
我需要将 .click 切换为 .delay，但如果我这样做并提供适当的 ms，整个插件将不会工作。任何人都可以对此有所了解吗？
最佳答案
因此，在阅读文档后，它指出插件需要一个带有字符映射的 chars.png 图像。您必须在您的服务器上托管此 chars.png，并使用值标识符“image”链接到 splitflap 构造函数。
然后你可以调用一个设置超时的函数来做动画。
HTML
<div class="example">
<h1>Simple Split-Flap</h1>
<div class="delay-splitflap">It worked</div>
</div>
CSS
body {
margin: 0;
padding: 20px;
background: grey;
color: white;
font-family: Tahoma, Geneva, sans-serif;
font-size: 24px;
}
.example {
padding: 0 0 10px;
margin-bottom: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
h1 {
margin: 0 0 10px;
padding: 10px;
font-size: 16px;
font-weight: normal;
background: #333333;
}
.splitflap {
margin: 0 auto;
-webkit-perspective-origin: top center;
-moz-perspective-origin: top center;
-ms-perspective-origin: top center;
perspective-origin: top center;
-webkit-perspective: 900px;
-moz-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;
}
JS/Jquery/Splitflap
// You need the chars.png link to make it work.
// Download this image and host it on ur server.
// Then link the location in the splitFlap
// Object constructor like i did below.
var chars = 'http://lab.les-mains-dans-le-code.fr/splitflap/images/chars.png';
$(document).ready(function(){
// set constructor values
$('.delay-splitflap').splitFlap({
image: chars,
textInit: 'waiting 4',
autoplay: false,
onComplete: function () {
console.log('Done !');
}
})
// Use set timeout to wait 4 sec.
setTimeout(function(){
$('.delay-splitflap').splitFlap('splitflap').animate();
},4000);
});
希望这对您有所帮助。
关于javascript - 从 .click 到 .delay jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33752172/