Использование jQuery для анимации объекта со свойствами, уже определенными как "! Important"

Question

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

К сожалению, другие элементы имеют свои позиции, определенные с помощью флагов CSS !important, что означает, что они не могут быть перемещены с помощью скользящей анимации без самой анимации, также устанавливающей флаг !important на каждом шаге анимации. Есть ли способ сделать это?

К сожалению, для меня полностью технически невозможно изменить исходный HTML или связанные стили CSS.

Answer 1

Даже если у вашего div есть стиль, который определен как! Важный, дочерние элементы этого div все равно должны иметь возможность переопределять этот стиль.В свете этого, что если вы сначала добавите новый элемент (используя jQuery), а затем примените стили к этому новому элементу?Например:

$("#something").wrapInner("<span class='test' />").children(".test").animate({
    fontSize: "3em"
  }, 1500 );

Таким образом, вам не нужно изменять исходный HTML / CSS или сам фреймворк jQuery, и в большинстве случаев вы все равно можете достичь желаемого эффекта.

Пример jsFiddle: http://jsfiddle.net/rVzhf/4/

Answer 2

Я думаю, что, называя эти атрибуты "! Важными", вы просто облажались.Действительно.

! Важные атрибуты будут распространяться на все, что не является! Важным ... Jquery добавляет стили как встроенные, максимально возможный ранее! Важный;и я не думаю, что вы можете попросить jquery добавить важный атрибут.

Решение: переработайте ваш CSS, чтобы он не использовал! важный.Способ сделать это было бы злоупотреблять системой оценок.Короче говоря, чем длиннее селектор, тем он важнее без использования тега! Important.! важный - для исключений.

Другой способ, и я не уверен, что это сработает, - поместить ваш! важный CSS как встроенный.Оно должно быть заменено любым значением, которое вводит Jquery.

Answer 3

Встроенные стили перекрывают !important, поэтому используйте $(element).css('top','10px') или удалите имена классов из элементов, которые содержат !important.