我如何使用jquery更改webkit css

这不会改变它。我不知道为什么我如何使用jquery更改webkit css

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

我也曾尝试

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

来源

2014-10-31 code511788465541441

至少'$（ “＃描写”），CSS（{ “ - WebKit的行钳”：“8 “}）;'工作。但它可能是一个非动画属性，这是为什么？ – zvona 2014-10-31 12:02:58

你是否收到任何错误，在控制台中发出警告 – 2014-10-31 12:03:43

This page似乎在暗示你需要显示：-webkit-盒;

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

它还提供了几个选择 - Clamp.js可以为您提供纯净虽然JS实现更多的“unversal”的解决方案 - 但你似乎无论如何必须走这路线。

来源

2014-10-31 12:03:35

下面的例子中，你怎么能制作动画：

$("#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>

来源

2014-10-31 12:14:43

我如何使用jquery更改webkit css

回答

相关问题