как использовать! важный в jQuery animate () функция - PullRequest
Новая
       2

как использовать! важный в jQuery animate () функция

6 голосов
/ 29 марта 2012

Пожалуйста, смотрите JQuery ниже:

Мне действительно интересно, как я могу использовать CSS !important для height в этом коде. 

        $j('#lveis-wrapper_3').animate({
            opacity: 0.0,
            height : 200
        }, 1200);

CSS #lveis-wrapper_3 ниже: 

#lveis-wrapper_3
{
    width: 844px !important;
    height: 936px !important;
    margin: 0pt 0pt 10px !important;
    padding: 0pt !important;
    float: none;
}

Я не могу удалить !important из height: 936px по некоторым причинам ...
так что я хочу изменить height на animate() функцию jQuery - но как?

Ответы [ 4 ]

6 голосов
/ 29 марта 2012

Вы просто не можете сделать это.

Согласно документации jQuery ...

"Все анимированные свойства должны быть анимированы до одногочисловое значение ... ... большинство нечисловых свойств нельзя анимировать с использованием основных функций jQuery ... "

http://api.jquery.com/animate/

Я настоятельно рекомендую пересмотреть вашу потребность в !important.

2 голосов
/ 31 декабря 2014

Вы можете использовать переход css, чтобы заставить его работать, потому что переход css будет работать, даже если атрибут style будет изменен на $ (elem) .attr ('style', '...');

вы используете:

JS 

// the element you want to animate
$(elem).attr('style', 'your_style_with_important');

1008 * CSS * elem { transition: all 0.2 linear; -moz-transition: all 0.2 linear; -webkit-transition: all 0.2 linear; }

1 голос
/ 05 марта 2019

Я использовал что-то вроде этого: 

const selected = $$(yourSelector);

selected .animate({
    height: height,
    width: width
}, {
    duration: 500,
    easing: 'swing',
    queue: false,
    step: (now, fx) => {
        selected[0].style.setProperty(fx.prop, `${fx.now}${fx.unit}`, 'important');
    },
    complete: () => {
        selected[0].style.setProperty('width', `${width}px`, 'important');
        selected[0].style.setProperty('height', `${height}px`, 'important');
    }
});
0 голосов
/ 19 декабря 2014

Вы не можете сделать это, но попробуйте это!

В зависимости от того, является ли это DIV, IMG, ... вам придется сделать что-то вроде этого.Этот пример в случае изображения: 

    $j('img#lveis-wrapper_3').animate({
        opacity: 0.0,
        height : 200
    }, 1200);

Приоритеты определяются в CSS со специфичностью селектора.Специфичность вашего селектора для # id была 1.0.0 , но добавление img # id теперь равно 1.0.1 , поэтому приоритетвыше.

...