Слайд-слайд не работает на слайде

Question

У меня есть контент с параметром «Читать дальше», когда пользователь нажимает кнопку «Подробнее». Расширение содержимого, основная функциональная работа, найденная, но я хочу, чтобы содержимое отображалось медленно и медленно, функция up работает отлично, но слайд вниз появляется мгновенно. Извините за мой английский.

HTML

<div class="comment more"> 
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. 
</div> 

<div class="comment more"> 
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. 
</div> 

CSS

.comment { 
    font-size: 18px; 
    letter-spacing: 0.12em; 
    max-width: 800px; 
} 
a.morelink{text-decoration:none;outline:none}.morecontent span{display:none} 

JS

$(document).ready(function() { 
    var showChar = 200; 
    var ellipsestext = "..."; 
    var moretext = "Read More"; 
    var lesstext = "Close"; 
    $('.more').each(function() { 
     var content = $(this).html(); 
     if (content.length > showChar) { 
      var c = content.substr(0, showChar); 
      var h = content.substr(showChar - 1, content.length - showChar); 
      var html = c + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'; 
      $(this).html(html); 
     } 
    }); 
    $(".morelink").click(function() { 
     if ($(this).hasClass("less")) { 
      $(this).removeClass("less"); 
      $(this).html(moretext); 
     } else { 
      $(this).addClass("less"); 
      $(this).html(lesstext); 
     } 
     $(this).parent().prev().slideToggle(); 
     $(this).prev().slideToggle(); 
     return false; 
    }); 
}); 

JSFIDDLE DEMO ->http://jsfiddle.net/039zkqbL/11/

Answer 1

Я разработал быстрое решение в спешке (Так, вероятно, не самый изящный, но он работает): Запустите его ниже

var minChars = 200, 
 
    readMoreEllipsis = "<span class='ellipsis'>... <a href='#' class='readmore'>Read more</a></span>", 
 
    readLessEllipsis = "<span class='ellipsis'><a href='#' class='readmore'>Read less</a></span>"; 
 

 
$(".more").each(function(){ 
 
    var self = $(this), 
 
     origText = self.text(); 
 
     
 
    self.attr("data-original-text", origText) // Storing original text in attributes 
 
     .attr("data-full-height", self.height()) // Storing minimum height in attributes 
 
     .html(origText.substr(0,minChars) + readMoreEllipsis) 
 
     .attr("data-condensed-height", self.height()); // Storing minimum height in attributes 
 
    
 
}); 
 

 

 
$(document).on('click', "a.readmore", function(){ 
 
    var self= $(this), 
 
     paragraph = self.parent().parent(), 
 
     origText = paragraph.attr("data-original-text"), 
 
     minHeight = paragraph.attr("data-condensed-height"), 
 
     maxHeight = paragraph.attr("data-full-height"); 
 
    
 
    if(paragraph.attr('data-expanded')==='true'){ 
 
     paragraph 
 
      .attr('data-expanded','false') 
 
      .css("border","green dashed 1px") 
 
      .css("max-height",maxHeight+"px") 
 
     targetHeight = minHeight; 
 
    }else{ 
 
     paragraph 
 
      .attr('data-expanded','true') 
 
      .css("border","red dashed 1px") 
 
      .css("max-height",minHeight+"px") 
 
      .html(origText + readLessEllipsis) 
 
     targetHeight = maxHeight; 
 
    } 
 
    
 
    paragraph.animate({ 
 
     maxHeight : targetHeight 
 
    }, 
 
    1000, 
 
    function(){ // Animation callback. Launched after the collapse or expand has finished. 
 
     if(paragraph.attr('data-expanded')==='true') return; 
 
     paragraph.html(origText.substr(0,minChars) + readMoreEllipsis); 
 
    }); 
 
    
 
});

div.more{ 
 
    display: block; 
 
    overflow:hidden; 
 
    border: blue solid 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="comment more"> 
 
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. 
 
</div> 
 
<br><br> 
 
<div class="comment more"> 
 
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. 
 
</div>