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

Как это сделать?Использовать 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") эффект переключения должно произойти.

источник

2014-02-20 Albert Cortada

Вы можете создать правило CSS с правилом calc в нем, добавить класс к объекту, который приводит к тому, что правило CSS вступит в силу и использовать переходы CSS3 для анимации. – jfriend00

Отличный ответ, но у меня есть другая проблема, если я это сделаю, и это то, что у меня есть некоторые другие анимации с jquery.animate, и они должны соответствовать скорости, и с переходом она не выглядит одинаково. Отличный ответ. –

может быть, это помогает:

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

каждый раз, когда этот сценарий удалит 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 будет делать анимацию.

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

источник

2014-02-20 14:59:54 Rickert

Да, что будет делать трюк, но тогда, когда я изменяю размер моего окна, у него нет поведения% so, это как дать элементу фиксированное количество widht с px, вместо выполнения clac() , извините за мое плохое объяснение. –

Итак, если я правильно понимаю вас, вы хотите иметь элемент, который составляет 100% от страницы, минус несколько пикселей, которые изменяются со страницы? – Rickert

Да, именно это я и ищу. –

Я не уверен, что с помощью 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/

источник

2014-02-20 15:16:57

Я нашел другую форму делают это с помощью Coment из @ jfriend00.

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

И в несильно из тумблера:

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

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

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

источник

2014-02-20 15:30:49

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

ответ

Смежные вопросы