JQuery усекать и раскрывать

Question

Я ищу для создания эффекта на своем веб-сайте, у меня есть контейнер информации в верхней части моей страницы, выступая в качестве заголовка для этой конкретной страницы. Элемент «header» состоит из некоторого текста и довольно большого изображения, но текст, вероятно, нужно усечь до определенного количества символов. Я хочу, чтобы иметь возможность нажать на кнопку, и для того, чтобы затем расширить/слайд, чтобы выявить не-усеченный текст дополнив текст DIV, прикрывая изображение

HTML

<div class="container"> 
    <div id="mytext" class="text"><h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit. Nunc vestibulum sodales massa ac consectetur. Maecenas eu nisl vel erat pellentesque eleifend ut a est. Nullam ac lorem nisi, eu consequat nisi. In euismod porttitor adipiscing. Aenean feugiat, turpis nec accumsan posuere, diam tellus pharetra arcu, sit amet ultrices magna felis ac elit. Donec sit amet massa nisi, sed semper turpis. Aliquam fringilla vestibulum urna, in tincidunt dui facilisis condimentum. Integer eget enim lectus, id congue ipsum. Sed sit amet ante nec turpis mattis venenatis. In urna quam, cursus vel cursus eu, volutpat eget leo. Praesent in mi diam, vitae tincidunt eros. Etiam feugiat venenatis purus eu cursus. Curabitur euismod, dolor in rhoncus vehicula, leo justo commodo orci, id pulvinar felis purus at lacus. <a href="#" id="expand-div">Expand</a></div> 
    <div class="image">Image goes here</div> 
</div> 

CSS

.container { 
    width:500px; 
    height:300px; 
    border:solid 1px black; 
    position:relative; 
} 

.image { 
    background:#00b3f0; 
    line-height:300px; 
    color:black; 
    width:50%; 
    text-align:center; 
} 

.text { 
    color:black; 
    height:100%; 
    position:absolute; 
    right:0; 
    background:#00DD99; 
    max-width:50%; 
} 

.text a { 
    text-decoration:none; 
    display:inline-block; 
    background:white; 
    color:black; 
    padding:2px 5px; 
} 

JQuery

var expand_btn = document.getElementById('expand-div').outerHTML; 

var long_title = document.getElementById('mytext').innerHTML; 
var short_title = jQuery.trim(long_title).substring(0, 240).split(" ").slice(0, -1).join(" ") ; 

document.getElementById('mytext').innerHTML = short_title + ' - ' +expand_btn; 

$("#expand-div").click(function(event) { 
    event.preventDefault(); 
    text_div = $(this).closest('div'); 
    div_width = parseInt(text_div.css('max-width')); 
    if(div_width == 50) { 
     $(this).closest('div').animate({"max-width": "100%"}, "slow"); 
     document.getElementById('expand-div').innerHTML = 'Shrink'; 
    } else { 
     $(this).closest('div').animate({"max-width": "50%"}, "slow"); 
     document.getElementById('expand-div').innerHTML = 'Expand'; 
    } 
}); 

I have put together a basic fiddle показать такой эффект я был после, но я никогда пчелу n лучше всего писать JQuery, и я, вероятно, допустил ошибки для себя, когда пытался изменить текст, потому что он переставал работать. В идеале с этой позиции я хотел бы оживить эффект усечения, но это не обязательно.

Answer 1

Использование имущества css text-overflow должно сделать это намного проще. Однако он не будет работать в некоторых старых браузерах.