2017-04-22 73 views
0

我已经尝试使用CSS和JavaScript的文本速记。如下如何使用Css转换?

HTML

<div class=" comment more">Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system distributed as open source under the Apache License. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation.Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system distributed as open source under the Apache License. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation</div> 

CSS

.comment { // 
    width: 100%; // 
    background-color: #f0f0f0; // 
    margin: 10px; 
} 

a.morelink { 
    text-decoration: none; 
    outline: none; 
} 

.morecontent span { 
    -webkit-transition: width 2s; 
    display: none; 
} 

JS

var showChar = 100; 
     var ellipsestext = "..."; 
     var moretext = "more"; 
     var lesstext = "less"; 
     $('.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().toggle(); 
      $(this).prev().toggle(); 
      return false; 
     }); 

Myfiddle:https://jsfiddle.net/Balakumar_B/v3xnpxvt/

在上面的代码中

,如果我点击更多信息链接突然显示其余内容,但我想慢慢显示其余内容。我不知道在哪里使用过渡以及如何使用..所以任何人都可以提出使用过渡的技巧以及在哪里使用它?

+0

我老兄我就不多说了JS,但我在这里做的悬浮效果,如果你可以在你的js比可能会有所帮助添加:) https://jsfiddle.net/v3xnpxvt/3/ –

回答

0

您不能显示使用CSS转换:无;/display:block;

但你可以尝试的jQuery的slideToggle(); 我创建了一个快速小提琴。这并不完美。只是举例

[https://jsfiddle.net/v4x564jf/][1] 
+0

当我使用的slideToggle()的内容,其余部分已显示下一行。 –

+0

我知道这是一个快速和肮脏的解决方案。让我再看一遍 – RacoonOnMoon