2014-08-30 109 views
0

我有種新聞「更多」&「少」新聞列表,但卡住了一點滑動效果。 這裏是jsfiddle demojquery顯示/隱藏更多/更少新聞幻燈片

$(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; 
}); 

的問題是如何添加的滑動效果。除此之外,還有其他不錯的選擇嗎?

乾杯!

回答

0

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

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

Working Demo