如何使用jQuery更改Webkit CSS

Question

This doesn't change it. I don't know why

$("#description").animate({"-webkit-line-clamp":8},500);
console.log($("#description").css("-webkit-line-clamp"))//returns 3

I have also tried

 $("#description").animate({"-webkit-line-clamp":"8"},500);

Answer 1

This page seems to suggest you need display: -webkit-box;

$("#description").css({"display":"-webkit-box"}).animate({"-webkit-line-clamp":8},500);

It also offers up a few alternatives - Clamp.js may offer you a more 'unversal' solution albeit pure JS implementation - but you seem to be going down that route anyway.

Answer 2

Here an example how you could animate it:

 $("#description").animate({ webkitLineClamp: 8 }, { duration: 5000, step: function (v) { $(this).css({webkitLineClamp: parseInt(v,10).toString()}); } }) 

  body { padding: 20px; font: 1.2em/1.2em'Open Sans', sans-serif; } .module { width: 250px; margin: 0 0 1em 0; overflow: hidden; } .module p { margin: 0; } .line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Line Clampin'</h1> <div id="description" class="module line-clamp"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div>