web-dev-qa-db-ja.com

jquery animate .css

スクリプトがあります：

$('#hfont1').hover(
    function() {
        $(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover
    }, 
    function() {
        $(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout
    }
);

どのようにアニメーション化またはスローダウンできますか？

javascriptjqueryjquery-animate
25
Plaski

.animate() の代わりに .css() を使用します（必要に応じて期間を指定します）。

$('#hfont1').hover(function() {
    $(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000);
}, function() {
    $(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000);
});

ここでテストできます 。ただし、色をアニメーション化するには、 jQueryカラープラグイン または jQuery UI が含まれている必要があります。上記では、期間は1000ミリ秒ですが、変更することも、デフォルトの400ミリ秒の期間だけオフにすることもできます。

77
Nick Craver

純粋なCSSソリューションを選択できます。

#hfont1 {
    transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out; /* FF 4 */
    -webkit-transition: color 1s ease-in-out; /* Safari & Chrome */
    -o-transition: color 1s ease-in-out; /* Opera */
}
9
blend

JQueryのWebサイトの例では、サイズとフォントがアニメーション化されていますが、ニーズに合わせて簡単に変更できます

$("#go").click(function(){
  $("#block").animate({ 
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em", 
    borderWidth: "10px"
  }, 1500 );

http://api.jquery.com/animate/

0
Levi Hackwith

JQuery .animate()関数でCSSを使用する必要がある場合は、set durationを使用できます。

$("#my_image").css({
    'left':'1000px',
    6000, ''
});

Durationプロパティは6000に設定されています。

これにより、1000分の1秒単位で時間が設定されます：6秒。

持続時間の後、次のプロパティ「イージング」はCSSの発生方法を変更します。

ポジショニングは絶対に設定されています。

絶対関数には、「線形」と「スイング」の2つのデフォルトがあります。

この例では、リニアを使用しています。

均等なペースを使用できます。

他の「スイング」は、指数関数的な速度の増加を可能にします。

バウンスなどのアニメーションで使用する、本当にクールなプロパティがたくさんあります。

$(document).ready(function(){
    $("#my_image").css({
        'height': '100px',
        'width':'100px',
        'background-color':'#0000EE',
        'position':'absolute'
    });// property than value

    $("#my_image").animate({
        'left':'1000px'
    },6000, 'linear', function(){
        alert("Done Animating");
    });
});
0
user5474108

実際に「.css」を使用して、影響を受けるdivにcssトランジションを適用できます。したがって、引き続き「.css」を使用し、「＃hfont1」のスタイルシートに以下のスタイルを追加します。 「.css」は「.animate」よりも多くのプロパティを許可するため、これは常に私の好みの方法です。

#hfont1 {
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
}
0
eroedig