2017-01-22 8 views
0

CSSのようにjQueryアニメーション機能の中にフォールバックを設定することは可能です。 calc()はすべてのブラウザで動作していません。jQueryアニメーションセットfallback

CSS:そのような

.element { 
width: 33.33%; 
width: calc(100%/3); 
} 

何か:

$('.element').animate({ 
'width': 33.33%, 
'width': calc(100%/3) 
}); 

ありがとう!

+2

あなたは「フォールバック」とはどういう意味ですかするタスクのためにクラスを追加するためのより良いオプションになりますか? – guest271314

+0

@ guest271314よくcalc()がすべてのブラウザで動作していません – howtoweb

+0

_ "calc()はすべてのブラウザで動作していません" _ Questionのパターンは期待される結果を表示するはずです。 – guest271314

答えて

1

あなたが

$(document).ready(function(){ 
 

 
     $('.element').addClass('animation'); 
 
     
 
    
 
    })
.element{width:100px;height:100px;background:lightblue} 
 
    .animation{ 
 
    animation-fill-mode:forwards; 
 
    animation:move 2s 1 ease-in-out; 
 
    } 
 
    @keyframes move{ 
 
     0%{width:100%;} 
 
     } 
 
    100%{width:calc(100%/3);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="element"></div>

関連する問題