だから私は素晴らしいjQueryulSlideプラグインを使用しています。ただし、アニメーションを遅らせたいと思います。プラグインを呼び出すと、.delay()
関数が機能しないようです。助言がありますか?
サイト: http: //www.carlpapworth.com/friday-quiz/#
HTML:
<ul id="qBox">
<!--Q1--> <li class="qContainer">
<div class="qQuestion">Question I </div>
<ul class="qAnswers">
<li><a href="#" class=""><h3>Answer a</h3></a></li>
<li><a href="#" class=""><h3>Answer b</h3></a></li>
<li><a href="#" class=""><h3>Answer c</h3></a></li>
</ul>
</li>
<!--Q2--> <li class="qContainer">
<div class="qQuestion">Question II </div>
<ul class="qAnswers">
<li><a href="#" class=""><h3>Answer 1</h3></a></li>
<li><a href="#" class=""><h3>Answer 2</h3></a></li>
<li><a href="#" class=""><h3>Answer 3</h3></a></li>
</ul>
</li>
<!--Q3--> <li class="qContainer">
<div class="qQuestion">Question III </div>
<ul class="qAnswers">
<li><a href="#" class=""><h3>Answer 1</h3></a></li>
<li><a href="#" class=""><h3>Answer 2</h3></a></li>
<li><a href="#" class=""><h3>Answer 3</h3></a></li>
</ul>
</li>
</ul>
カスタム-JS:
$(document).ready(function() {
$('#qBox').ulslide({
effect: {
type: 'slide', // slide or fade
axis: 'x', // x, y
distance: 0 // Distance between frames
},
duration: 2000,
autoslide: 0,
width: 500,
height: 300,
mousewheel: false,
nextButton: '.qAnswers a',
prevButton: '#e1_prev'
});
});