Question

我有一些“更多”的消息＆amp; “少”新闻上市，但有点滑动效果。这是jsfiddle demo

$(function() {
  var blockTotalChar = 200, blockChar = "more", hideChar = "less";
  $('.block').each(function() {
  var content = $(this).text();
  if (content.length > blockTotalChar) {
    var con = content.substr(0, blockTotalChar);
    var hcon = content.substr(blockTotalChar, content.length - blockTotalChar);
    var txt = con + '<span class="dots">...</span><span class="hidden_more"><span>' + hcon + '</span>  <a href="" class="blockn_more">' + blockChar + '</a></span>';
    $(this).html(txt);
  }
});
$(".blockn_more").click(function() {
  if ($(this).hasClass("sample")) {
    $(this).removeClass("sample");
    $(this).text(blockChar);
  } else {
    $(this).addClass("sample");
    $(this).text(hideChar);
  }
  $(this).parent().prev().toggle();
  $(this).prev().toggle();
  return false;
});

问题是如何添加滑动效果。对于这样的想法还有其他好的选择吗？

干杯！

Answer 1

使用.slideToggle()代替.toggle()：

$(this).parent().prev().slideToggle();
$(this).prev().slideToggle();

<强> Working Demo

jquery显示/隐藏更多/更少新闻幻灯片

1 个答案: