Альтернатива jQuery slideDown () и slideUp (), не влияющая на свойство display - PullRequest
Новая
       9

Альтернатива jQuery slideDown () и slideUp (), не влияющая на свойство display

2 голосов
/ 08 октября 2010

Я пытался использовать эффект slideDown () для веб-сайта, над которым я работаю, но мне трудно получить нужный эффект. Вот пример, показывающий, чего я хочу достичь. 

<div>
    blahblahblahblah

    <span id="span_more" style="display:none">
        blahblahblah
    </span> 

    <a class="link_more" id="more">More&hellip;</a></div>
</div>

В основном, когда нажимается «More ...», я хочу, чтобы текст, который в данный момент скрыт, отображался с использованием эффекта скольжения, оставаясь на одной линии с концом видимого текста. Это не представляется возможным с slideDown (), потому что он меняет отображение на блок.

Большое спасибо.

Ответы [ 3 ]

6 голосов
/ 08 октября 2010

К сожалению, это принципиально невозможно.Анимация jQuery опирается на элемент, имеющий высоту и ширину.Для встроенных элементов эти размеры не установлены или не устанавливаются, поэтому анимации (с использованием animate или slideUp) должны делать их элементами блочного уровня.

fadeIn работает и может быть полезной альтернативой.

1 голос
/ 08 октября 2010

Вам нужно будет обернуть свой текст, который всегда отображается в промежуток или делитель, который плавает влево, также есть «дополнительный» текст с плавающей точкой слева и ваша ссылка clear: both;, но эта структура сделает простую.slideDown () работа: 

<div>
    <span style="float: left;">blahblahblahblah</span>

    <span id="span_more" style="display: none; float: left;">
        blahblahblah
    </span>

<div style="clear: both;"><a class="link_more" id="more">More&hellip;</a></div>
</div>

Вот демонстрация, демонстрирующая это в действии: http://jsfiddle.net/7yqMr/

0 голосов
/ 08 октября 2010

У меня была такая проблема раньше.В то время казалось невозможным изменить поведение jQuery, и я столкнулся с проблемами при написании подпрограммы, которая делала бы то же самое со встроенными блоками.Итак, я переключился на использование display: block элементов с float: left, чтобы держать их в одной строке. 

<div>
    <div style="display: block; float: left;">blahblahblahblah</div>

    <div id="span_more" style="display: none; float: left;">
        blahblahblah
    </div> 

    <a style="display: block; float: left;" class="link_more" id="more">More&hellip;</a></div>
</div>
...