Делать переход div медленнее в новое измерение с помощью jQuery

Question

Делать переход div медленнее в новое измерение с помощью jQuery

0

Я думаю, что jsfiddle будет лучше иллюстрировать проблему: http://jsfiddle.net/9mHk2/

Я пытаюсь заставить обертывание div перейти на новую ширину с помощью слайда /fade/что-то, а не привязываться к нему.

Каков самый простой способ сделать это?

<div style="border:1px solid #000000; padding:8px; float:right;">
    Here is a div with some text <span id="spn1">....</span>
</div>

<br /><br /><br />

<center>
    <input id="btn1" name="btn1" type="submit" value="Hide" />
</center>

$('#btn1').click(function (e) {
    e.preventDefault();
    $('#spn1').fadeOut('500');
});

user982119 11 нояб. 2013, в 21:43

Источник

0

что случилось с примером jsfiddle после редактирования вопроса? теперь нет кода для ссылки :(
Jonathan Marzullo 11 нояб. 2013, в 19:48
0

Кто-то отредактировал пост, чтобы удалить фрагмент кода. Не может иметь ссылку jsfiddle на вопрос без сопровождающего фрагмента кода. К несчастью.
user982119 11 нояб. 2013, в 19:49
0

jsfiddle.net/9mHk2
user982119 11 нояб. 2013, в 19:51
0

Опубликуйте часть кода из скрипки в вопросе, а не просто code . знак равно
Dan-Nolan 11 нояб. 2013, в 19:54

Показать ещё 2 комментария

Теги:

javascript

jquery

html

2 ответа

0

Вот другой подход, чем user1506980, скрыть диапазон с использованием анимации ширины. Требуется дополнительный CSS.

#spn1 {
    overflow: hidden;
    display: inline-block;
    margin: 0;
    padding:0;
    height: 1em;
}

$('#btn1').click(function (e) {
    e.preventDefault();
    $('#spn1').animate({width:0},500).fadeTo(500,0);
});

jsFiddle

SeinopSys 11 нояб. 2013, в 18:14

Ещё вопросы

что случилось с примером jsfiddle после редактирования вопроса? теперь нет кода для ссылки :(
Кто-то отредактировал пост, чтобы удалить фрагмент кода. Не может иметь ссылку jsfiddle на вопрос без сопровождающего фрагмента кода. К несчастью.
Опубликуйте часть кода из скрипки в вопросе, а не просто code . знак равно

Dan-Nolan · Accepted Answer · 2013-11-11T17-29-00.000Z

Похоже, вы хотите скрыть эллипсы, а затем медленно анимировать прямоугольник, правильно? Вы можете сделать это, вычислив ширину до и после того, как span будет скрыт, а затем оживите его:

$('#btn1').click(function (e) {
    e.preventDefault();

    // Here the width before the span is hidden
    var originalWidth = $('#rectangle').width();
    $('#spn1').hide();

    // Here the width after the span is hidden
    var newWidth = $('#rectangle').width();

    // Now animate the difference!
    $('#rectangle').css('width',originalWidth).animate({width: newWidth}, 1200);
});

FIDDLE

Работает отлично .. большое спасибо
Нет проблем. Удачного кодирования = D