Utilisez css calc () dans jquery

Comment puis-je faire cela?

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

Je peux le faire si c'est seulement % ou seulement pxmais pas calc()puis-je utiliser une autre option de jQuery? ou une autre astuce de JavaScript?

C'est un changement qui doit être effectuée lorsque l'utilisateur clique sur un élément, donc:

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

lorsque l'utilisateur clique sur le $("#otherElement") la bascule effet doit se produire.

source d'informationauteur Albert Cortada

  1. 15

    peut-être que cela aide:

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

    à chaque fois ce script permet de supprimer 278px à partir de l'élément

    edit:
    Essayez cela, il faudra recalculer lorsque la fenêtre est redimensionnée. Si je vous comprends bien ce qui devrait aider.

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

    CSS3 option

    Depuis CSS3 a un animateion fonction, vous pouvez également utiliser ce:

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

    Si vous souhaitez animer l'élément.
    Et vous pourriez faire ceci:

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

    Dans ce cas, le CSS va faire de l'animation.

    Veuillez noter que cela ne fonctionne pas pour les anciens navigateurs

  2. 2

    Je ne suis pas sûr de l'aide calc est d'aller travailler. Ma réponse vérifie le parent de la largeur, puis effectue une opération sur elle, et puis anime l'élément.

    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. 1

    J'ai trouvé une autre forme de le faire avec l'aide du commentaire de @jfriend00.

    J'ai d'abord créer la règle de CSS mais sans transition.

    Et dans la finalité de la bascule:

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

    .acoreonOpened est là que j'ai à la règle CSS avec calc (100% - 278px).

    Donc, j'ai d'abord faire de l'animation avec jquery, et quand elle se termine, je supprime le style qui utilise jquery (si ce n'est, le css ne fonctionne pas), et après j'ai mis la classe, de sorte qu'il se comporte comme une largeur en %.