Question

我这里有这个代码：

$(document).ready(function () {
  $(".toggle").click(function () {
    //$(".readmore").slideToggle();
    $(".readmore").toggle();
    $(this).text(function(){return $('.readmore:visible').length?'Read less':'Read more'});
  }).triggerHandler('click');
});

我想点击Readmore时会产生一个滑动切换效果，但是只要我用slidetoggle替换切换，它就会停止工作。有什么想法吗？

Answer 1

.toggle()：没有参数只是简单地切换元素的可见性

相反，.slideToggle()需要动画时间才能完成。这意味着您需要使用完整回调：动画完成后调用的函数。

因此，当您在slideToggle之后测试可见性时，它不起作用，因为此值仅在超时后更改，而切换时它很快就会更改。由于这种延迟，您需要等待动画完成才能执行您的代码。

在下面的代码段中：

＆＃13;

$(".toggle").on('click', function (e) {
    $(this).nextAll(".readmore:first").slideToggle(400, function() {
        $(e.target).text($('.readmore:visible').length?'Read less':'Read more');
    });
});

$(".readmore").toggle();
$('.toggle').text($('.readmore:visible').length?'Read less':'Read more');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button class="toggle">Read more</button><br/>
<div class="readmore">
blah blah blah
</div>
<button class="toggle">Read more</button><br/>
<div class="readmore">
blah blah blah
</div>

＆＃13;

Answer 2

可能会有所帮助。

$(document).ready(function () {
 $(".readmore").hide();
  $(".toggle").click(function (event) {
    $(this).nextAll(".readmore:first").slideToggle(function(){    
      $(event.target).text(function(){
        return $('.readmore:visible').length?'Read less':'Read more'});
    });
  });
});

HTML部分

<button class="toggle">
Read more
</button>
<div class="readmore">
blah blah blah
</div>

slidetoggle的默认动画时间为300毫秒，您可以增加，只需将slidetoggle回调（3行）更改为以下内容：

$(this).nextAll(".readmore:first").slideToggle(500,function(){    
      $(event.target).text(function(){
        return $('.readmore:visible').length?'Read less':'Read more'});
});

如何在这里使用Jquery幻灯片切换？

2 个答案: