Использовать css calc() в jquery

Как я могу это сделать?

$('#element').animate({ "width": "calc(100% - 278px)" }, 800);
$('#element').animate({ "width": "calc(100% - 78px)" }, 800);

Я могу сделать это, если это только % или только px, но не calc(), можно ли использовать другую опцию jQuery? или какой-нибудь другой трюк JavaScript?

Это изменение, которое нужно сделать, когда пользователь нажимает на какой-либо элемент, поэтому:

$("#otherElement").on("click", FunctionToToggle);

когда пользователь нажимает кнопку $("#otherElement"), должен появиться эффект переключения.

Ответы

Ответ 1

возможно, это помогает:

$('#element').animate({ "width": "-=278px" }, 800);

каждый раз, когда этот script удаляет 278px из элемента

изменить: Попробуйте это, он будет пересчитываться при изменении размера окна. Если я правильно понимаю, что должно помочь.

$(window).on("resize",function(){
   $('#element').css("width",$('#element').width()-275+"px");
});

вариант CSS3

Так как CSS3 имеет функцию animateion, вы также можете использовать это:

#element{
   -webkit-transition:all 500ms ease-out 0.5s;
   -moz-transition:all 500ms ease-out 0.5s;
   -o-transition:all 500ms ease-out 0.5s;
   transition:all 500ms ease-out 0.5s;
}

Если вы хотите анимировать элемент. И вы можете сделать это:

 $('#element').css("width","calc(100% - 100px)");

В этом случае CSS будет делать анимацию.

Обратите внимание, что это не будет работать для старых браузеров

Ответ 2

Я не уверен, что использование calc будет работать. Мой ответ проверяет родительскую ширину, затем выполняет на ней операцию, а затем анимирует элемент.

elWidth = $('#element').parent().width(); // Get the parent size instead of using 100%
elWidth -= 20; // Perform any modifications you need here
$('#element').animate({width: elWidth}, 500); //Animate the element

http://jsfiddle.net/yKVz2/2/

Ответ 3

Я нашел другую форму, чтобы сделать это с помощью coment @jfriend00.

Сначала я создаю правило CSS, но без перехода.

И в функции переключателя:

$('#element').animate({ width: "-=200px" }, 800, function () { $('#element').addClass('acoreonOpened');$('#element').removeAttr("style") });

.acoreonOpened - это где у меня правило CSS с calc (100% - 278px).

Итак, сначала я создаю анимацию с jquery, и когда она закончится, я удалю стиль, который использует jquery (если нет, css не будет работать), и после того, как я поместил класс, он будет вести себя как ширина с %.