Прокрутите текст переполнения в представление

Question

Мне нужно прокрутить переполненный текст в поле зрения.

Я пытаюсь анимировать отступ текста, но мне нужно анимировать правильное количество пикселей.Как рассчитать это?

См .: http://jsfiddle.net/wqRcK/5/

Мне нужно только прокрутить текст в поле зрения, а не "общую ширину", как я пытался.

Какпобочный вопрос, как мне заставить span.title соблюдать отступ 10 пикселей?

Answer 1

Установите span на inline-block,
и анимируйте его на "-" + ( $(this).width() - $(this).parent().width() ) + "px":

div.box span.title { white-space: nowrap; display: inline-block; }

$(document).ready(function() {
    var boxwidth = $("div.box").width();
    $("span.title").hover(
      function () {
        $(this).stop().animate({
            textIndent: "-" + ( $(this).width() - $(this).parent().width() ) + "px"  
        }, 1000);  
      }, 
      function () {
        $(this).stop().animate({
            textIndent: "0"           
        }, 1000);  
      }
    );
});

Вот оно у вас на скрипке: http://jsfiddle.net/wqRcK/20/

---

PS Не забывайте всегда кэшировать ваши селекторы.

Answer 2

Чтобы завершить ответ Джозефа, я добавил отступы для вашего дополнительного вопроса, сделав заголовок симметричным => http://jsfiddle.net/wqRcK/45/

Aymeric.