CSS Calc（）を.animate（）で使用しています

Question

アニメーションを少し作ってみましたが、 "calc（）"が.animateで動作しないように見えるので、応答できません。 これに対してもう1つの解決策はありますか？素晴らしいと最高に関しては

if (time == 1) { 
    $("#message").animate({ marginTop: "calc(-15px + .8vw)" }); 
} else { 
    $("#message").animate({ marginTop: "calc(0px + .8vw)" }); 
} 

、 ベルナルド

編集：私はドロップダウンメニューの私のウェブサイトのonchange（に表示されるメッセージ）をアニメーション化しようとしています。 私はcalc（）を使用しているので、応答が必要です。

<a>Time: </a><select id="time" onchange="setTime()" name="time" required> 
        <option value="1" selected>-</option> 
        <option value="3">-</option> 
       </select></br> 

calc（）を使用しないで別の方法で反応させる方法がありますか？

Answer 1

vwがビューポートの幅の1％に等しい尺度の単位であるので、我々はにcalc()文を計算することができます。値jQueryが理解できます。

var time = true 
 

 
$('#toggle').click(function() { 
 
    time = !time; 
 
    
 
    if (time === true) { 
 
    // calc(-15px + .8vw) 
 
    var calc = -15 + (0.08 * $(window).width()) + "px"; 
 
    $("#message").animate({ marginTop: calc }); 
 
    } else { 
 
    // calc(0px + .8vw) 
 
    var calc = 0 + (0.08 * $(window).width()) + "px"; 
 
    $("#message").animate({ marginTop: calc }); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="toggle">Toggle</button> 
 
<div id="message">Message</div>

jQueryのは、それは数字だけが

Answer 2

calc()の代わりにJavaScriptが使用されています。

は基本的に私はこのラインでVW単位の値に私を計算します。

var vw_value = $(window).width()/100 * 0.8; 

ここフィドル作業します。ただ違いを見るために0にtime変数を変更：

var time = 0; 
 

 
var vw_value = $(window).width()/100 * 0.8; 
 

 
if (time == 1) { 
 
    $("#one").animate({ marginTop: vw_value - 15 + "px" }); 
 
} else { 
 
    $("#one").animate({ marginTop: vw_value + "px" }); 
 
}

body{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#one{ 
 
    margin-top:0; 
 
    width: 40px; 
 
    background:grey; 
 
    height:40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one"></div>