jQuery UI - addClass removeClass - застряли значения CSS - PullRequest
Новая
       8

jQuery UI - addClass removeClass - застряли значения CSS

4 голосов
/ 16 апреля 2010

Я пытаюсь сделать простую анимацию.

  1. Вы показываете div. Он оживляет правильно.
  2. Вы скрываете div. Правильно.
  3. Вы снова показываете div. Это показывает, но нет анимации. Он застрял на значении, когда вы впервые прервали его.

Так что каким-то образом интерполяционный CSS, который происходит во время [add | remove] Class, застревает там. Во второй раз класс [add | remove] фактически запущен, но CSS, который он устанавливает из класса, игнорируется (я думаю, что он затенен). Как я могу исправить это, БЕЗ обращения к .animate и жестко закодированным значениям стилей? Весь смысл заключался в том, чтобы поместить конечную точку анимации в класс CSS.

Спасибо! 

<!doctype html>

<style type="text/css">
div {
    width: 400px;
    height: 200px;
}
.green {
    background-color: green;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('#show').bind({
        click: function() {
            showAndRun()
        }
    })
    $('#hide').bind({
        click: function() {
            $('div').stop(true, false).fadeOut('slow')
        }
    })

    function showAndRun() {
        function pulse() {
            $('div').removeClass('green', 2000, function() {
                $(this).addClass('green', 2000, pulse)
            })
        }
        $('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)
    }
})
</script>

<input id="show" type="button" value="show" /><input id="hide" type="button" value="hide" />
<div style="display: none;"></div>

Вы также можете посмотреть, что он делает здесь, на jsbin

1 Ответ

2 голосов
/ 16 апреля 2010

Я разобрался с решением.Хотя не уверен, что я доволен этим.По сути, это очень плохая «перезагрузка» CSS при нажатии show

Анимация зацикливается вечно.Поэтому я не могу положиться на очередь jQuery (конечной длины).Я должен достичь цикла с помощью обратного вызова, как показано в коде.Проблема, которая вызывает: вы не можете .stop(true, true).Первое значение true очищает очередь, но в ней ничего нет после анимации, которая в данный момент выполняется.Так что это бесполезно.Второй истинный переход к последней анимации в очереди.Опять бесполезно, так как на самом деле мы собираемся оставаться в одной вещи, которая зацикливается на себе.2-й аргумент должен быть false, чтобы прервать бесконечный цикл.

Проблема с прерыванием.Он оставляет CSS там, где он есть.Теперь вы застряли со случайными css-реквизитами на том, что ваша анимация интерполировала (в моем случае background-color).Также я хотел, чтобы прерывание было мгновенным.Таким образом, другого пути не было.

В моем случае background-color во время анимации был установлен на element.style (обнаружен при проверке в инструментах браузера), который переопределяет все, что происходит.Эта опора не существовала, пока не запустилась первая анимация.Затем он был прерван, и предполагаемый временный стиль застрял там (я думаю).

Итак, вы снова запускаете анимацию.Зеленый класс применяется.JQuery выясняет диапазон цветов для прохождения.Получается из #shadeofgreen в #thesameshadeofgreen, потому что застрявшее значение element.styles переопределяет все, что предоставляется классом.Таким образом, анимация скользит между двумя одинакового цвета.Это работает!Но цвет изменить нельзя.

Так что исправление в моем случае не ужасно, но я все еще не уверен, что мне это нравится, потому что я не уверен, что его можно легко применить к различнымситуаций.

Измените 

$('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)

на 

$('div').stop(true, false).removeAttr('style').hide().addClass('green').fadeIn('slow', pulse)

Ключ - 

.removeAttr('style').hide().addClass('green')

Это, по сути, ваш сброс CSS.Гарантируется, что он всегда будет там, когда вам это нужно, поскольку это происходит ровно до того, как вещь снова отобразится.

Обратите внимание, что установка !important на цвет в классе green css не работает, потому чтоэто (кажется) переопределит element.styles (который использует анимация jQuery), и вы не получите желаемый результат.

Конечно, я все еще открыт для предложений.Я, вероятно, что-то упустил, так как я только начал смотреть на CSS и jQuery в начале недели.

Вы можете увидеть влияние .removeAttr('style') в фиксированном коде здесь на jsbin .

...