我敢肯定,这可能是一件简单的事情......
我正在尝试让 fade
到 slide
:
$slides.eq($btns.index(this)).fadeIn().siblings().hide();
目前,它与 fade
配合使用效果很好,我只需要将此行调整为 slide
。我做了显而易见的事情,但我必须用语法做一些事情,因为它不起作用。
提前干杯!
//已添加
var
$btns = $('.btns a'),
$slides = $('.slides > div');
$btns.click(function(){
$(this).addClass('current')
$(this).parent().siblings().find('a').removeClass('current');
$slides.eq($btns.index(this)).fadeIn(function(){ slideIn }).siblings().hide();
return false;
});
$btns.first().click();
<div class="slides">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
<div>Slide 6</div>
</div>
<ul class="btns">
<li class="one"><a href="#">1</a></li>
<li class="two"><a href="#">2</a></li>
<li class="three"><a href="#">3</a></li>
<li class="four"><a href="#">4</a></li>
<li class="five"><a href="#">5</a></li>
<li class="six"><a href="#">6</a></li>
</ul>
最佳答案
如果你想要一个普通的幻灯片,使用.slideUp()
和 .slideDown()
,像这样:
$slides.eq($btns.index(this)).slideDown().siblings().slideUp();
如果您想要淡入淡出+滑动类型的效果,请将速度参数传递给 .hide()
和 .show()
,像这样:
$slides.eq($btns.index(this)).show('slow').siblings().hide('slow');
关于javascript - 为 div 滑动而不是淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3097708/