如何在这里使用Jquery滑动切换？

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时有一个滑动切换的效果，但是一旦我用滑动切换替换了切换，它就停止工作了。有什么想法吗？

Answer 1

.toggle()：不带参数只需切换元素的可见性

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

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

在以下代码片段中：

​

$(".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');

<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>

​

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>

滑动切换的默认动画时间为300ms，您可以将其增加，只需将滑动切换回调(3行)更改为：

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