0

もともと、html側で要素をつくった場合はうまくいきます。

[css]

    .box{
        width:100px;
        height:100px;
        background:tomato;
        transition: 3s;
    }

    .blue{
        background:skyblue;
    }





    [js]

    $(function(){
        //要素をつくる
        var box = $('<div class="box">');

        //表示する
        $('body').append(box);
        box.addClass('blue');//アニメーション

    });
6
  • アニメーションとはどう言ったアニメーションをどうやって実装して行っているのでしょうか?
    – user10259
    Commented 2018年1月29日 8:08
  • ありがとうございます!背景色をtomato→skyblueにしたいです!
    – aqua
    Commented 2018年1月29日 8:21
  • あぁ、そういうことですね。backgroudclassでスタイル指定が重複しているから反映されないと言うことですね。ブラウザはなんでしょうか?Win7のChromeでは変わりますが……
    – user10259
    Commented 2018年1月29日 8:33
  • win 7のchromeです
    – aqua
    Commented 2018年1月29日 8:34
  • もしかして、今の状態でも色は変わってるけどジワジワ変わって欲しいとか?
    – user10259
    Commented 2018年1月29日 8:43

2 件の回答 2

1

requestAnimationFrameで1フレーム遅らせることで可能です。

    $(function(){
        //要素をつくる
        var box = $('<div class="box">');

        //表示する
        $('body').append(box);
        requestAnimationFrame(()=> box.addClass('blue'));//アニメーション

    });
   .box{
        width:100px;
        height:100px;
        background:tomato;
        transition: 3s;
    }

    .blue{
        background:skyblue;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

本当はよろしくないけどDOMの読み込み準備が出来た後にsetTimeout入れて処理。
特定の親DOMの変更を監視して自分でイベント作らないとキチンとはできないんじゃないかなぁ
関連:jQuery 動的に読み込んだDOM要素の表示完了時にjQueryプラグインを適用したい

もしくはjQueryのanimate関数を使用するかだと思います

$(function(){

    //要素をつくる
    var box = $('<div id="debug" class="box">');

    //表示する
    $('body').append(box);
    
    //boxの準備を待つ
    box.ready(function() {
        setTimeout(function(){
            box.addClass('blue');//アニメーション
        }, 10);
    });
});
.box{
    width:100px;
    height:100px;
    background:tomato;
    transition: 3s;
}

.blue{
    background:skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


backgroundColorに対策しないといけないようですね。(シラナカッタ)

//対策
(function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.css(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]}})(jQuery);

$(function(){

    //要素をつくる
    var box = $('<div class="box">');

    //表示する
    $('body').append(box);
    
    //boxの準備を待つ
    box.ready(function() {
        $(box).animate({ 
          "backgroundColor":"#87CEEB"
        }, 300 );//アニメーション
    });
});
.box{
    width:100px;
    height:100px;
    background:tomato;
    transition: 3s;
}

.blue{
    background:skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3
  • ありがとうございます!animate()だと色のアニメーションができないようなのです。
    – aqua
    Commented 2018年1月29日 9:01
  • @forest jQueryのanimateはカスタマイズしないと色使えないみたいですね。とりあえずそのバージョンも追記しておきます。
    – user10259
    Commented 2018年1月29日 9:12
  • box.readyですが、無意味であり非推奨です。公式のAPIドキュメントに解説されていますので一読してみてください。 api.jquery.com/ready
    – hinaloe
    Commented 2018年1月29日 10:09

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。