jQuery: readmore.js настройки
$('.content').readmore({
speed: 435,
maxHeight: 100,
moreLink: '<a href="#">Подробнее</a>',
lessLink: '<a href="#">Скрыть</a>',
afterToggle: function(trigger, element, more) {
if(more) {
$(".content span").css("background", "none");
}
if(! more) {
$(".content span").css("background", "linear-gradient(0deg, #f3f3f3, transparent)");
$('html, body').animate({
scrollTop: element.offset().top
},{
duration: 100
});
}
}
});
Настройки readmore.js по-русски:
- Speed — скорость разворачивания/сворачивания в милесекундах. Оптимально 500.
- maxHeight — высота отображаемого блока в пикселях.
- moreLink — название ссылки «подробнее».
- lessLink — название ссылки «спрятать».
Далее мне необходимо сделать так, чтобы поверх текста был градиент, который не обрубал текст на указанных пикселях в maxHeight, а плавно сходил на «нет». Для этого я сделал span внутри элемента и добавил в него стили:
.content span{
background: linear-gradient(0deg, #f3f3f3, transparent);
position: absolute;
display: block;
width: 100%;
height: 100%;
z-index: 10000;
}
Соответственно при нажатии стили так и остаются, поэтому необходимо удалять фон при нажатии на кнопку «Подробнее». И для этого я написал условие:
if(more) {
$(".content span").css("background", "none");
}
Но возникла ещё одна загвоздка, когда нажимаем кнопку «Скрыть», то фон не возвращался, поэтому было написано следующее условие:
if(! more) {
$(".content span").css("background", "linear-gradient(0deg, #f3f3f3, transparent)");
$('html, body').animate({
scrollTop: element.offset().top
},{
duration: 100
});