jquery에서 css calc() 사용

어떻게해야합니까?jquery에서 css calc() 사용

$('#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

calc 규칙이있는 CSS 규칙을 만들고, CSS 규칙을 적용하게하는 클래스를 객체에 추가하고 애니메이션에 CSS3 전환을 사용할 수 있습니다. – jfriend00

좋은 답변이지만,이 작업을 수행하면 또 다른 문제가 발생합니다. jquery.animate가 포함 된 다른 애니메이션이 있고 속도와 일치해야하고 전환과 동일하게 보이지 않습니다. 어쨌든 위대한 대답. –

어쩌면이 도움이 :

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

때마다이 스크립트 요소에서

편집 278px를 제거합니다 : 창 크기를 조정할 때 다시 계산이보십시오. 내가 너를 올바르게 이해한다면 도움이 될거야. CSS3는 animateion 기능을 가지고 있기 때문에

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

CSS3 옵션

당신은이를 사용할 수 있습니다

#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; 
}

당신이 요소를 애니메이션을 적용 할 경우. 그리고 당신이 할 수 있습니다 :는 CSS 애니메이션을 할 것입니다이 경우

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

합니다.

이는 이전 버전의 브라우저

출처

2014-02-20 14:59:54 Rickert

그래, 그 트릭을 할 것이지만, 그때, 내 윈도우의 크기를 변경할 때 dosen't는 %의 행동을 가지고 있으므로, clac()을하는 대신 px로 요소를 고정 된 양만큼주고, , 나쁜 설명에 대해 유감스럽게 생각합니다. –

그래서 당신이 정확하게 당신이 페이지의 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

그래, 그 트릭을 할 것입니다,하지만 그때, 내 윈도우의 크기를 변경할 때, dosen't %의 행동을 가지고, 그것은 엘리먼트에게 pac로 widht의 고정 된 양을주는 것과 같지만, clac() , 나쁜 설명에 대해 유감스럽게 생각합니다. –

나는 @ jfriend00의 COMENT의 도움으로 그 일을 다른 형태를 발견했다.

먼저 CSS의 규칙을 만들지 만 전환은하지 않습니다.

그리고 전환의 funcion에서

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

.acoreonOpened 내가 (100 % - 278px) CALC와 CSS 규칙이있는 곳입니다.

그래서 jquery로 애니메이션을 만들고, 끝날 때 jquery가 사용하는 스타일을 제거합니다 (CSS가 작동하지 않으면 CSS가 작동하지 않습니다). 그리고 클래스를 넣은 후에 너비처럼 동작합니다. 와 %.

출처

2014-02-20 15:30:49

jquery에서 css calc() 사용

답변

관련 문제