jQueryで2秒後に要素をスライドインさせたい

Question

###実装したいこと
jQueryを使って要素を2秒後にスライドさせながらふんわり表示させたいのですが
自分が書いたコードですと、ふんわり(ゆっくり)要素が表示全てされてから右にスライドします。
どのように修正すればゆっくりスライドしながら要素もゆっくり表示するのかご指導いただければと思います。

下記がコードになります。

$(function(){
	$('.fade').fadeOut(0, 1);
		setTimeout(function() {
			$('.fade').fadeTo(1000, 1);
			$(".fade").css({
				left:"-50px",
				opacity:"0.0"
			}).animate({
				left:"50px",
				opacity:"1.0"
			},2000);
		}, 1100);
});

お分かりになられるかた、どうかお力をお貸しください。
宜しくお願い致します。

Answer 1

こうですかね？

$(function(){
    $('.fade').css({
        left: "-50px",
        opacity: "0"
    });

    setTimeout(function() {
        $(".fade").animate({
            left:"50px",
            opacity:"1.0"
        }, 2000);
    }, 1100);
});

Comments

[satoshickkk]

ベストアンサーには投稿が早かった方にさせていただきましたが
こちらのコードでも思い通りの動きをしてくれました！
早い回答とても助かりました、本当にありがとうございます。

Answer 2

animateの第2引数でオブジェクトを渡して
queue:falseにすると同時になります。

$(function(){
    $('.fade').fadeOut(0, 1);
        setTimeout(function() {
            $('.fade').fadeTo(1000, 1);
            $(".fade").css({
                left:"-50px",
                opacity:"0.0"
            }).animate({
                left:"50px",
                opacity:"1.0"
            },{
                    duration: 2000,
                    queue: false
            });
        }, 1100);
});

Comments

[satoshickkk]

回答ありがとうございます。
いただきました上記のコードでも思い通りの動きにする事が出来ました！
素早い反応本当に感謝いたします、ありがとうございました。

Answer 3

こんにちは

どのような状況の要素に上記コードを付与したいのかわかりませんが

(pug)

.fade テスト

.fade{
	background-color:#000000;
	width:200px;
	display:inline-block;
	color:#fff;
	position:relative;
	display:none;
}

$(function(){
    //$('.fade').fadeOut(0, 1);
        setTimeout(function() {
            //$('.fade').fadeTo(1000, 1);
            $(".fade").css({
                left:"-50px",
                opacity:"0.0",
　　　　　　　　　display:"block"
            }).animate({
                left:"50px",
                opacity:"1.0"
            },2000);
        }, 1100);
});

とかですかね。
jqueryのfade系をどうしても使いたいなら

$(function(){
    $('.fade').fadeOut(0, 1);
    setTimeout(function() {
        $('.fade').fadeTo(0, 1);
        $(".fade").css({
            left:"-50px",
            opacity:"0.0",
        }).animate({
            left:"50px",
            opacity:"1.0"
        },2000);
    }, 1100);
});

みたいな感じ？の無駄しか感じないコードにするか。

$('.fade').fadeOut(0, 1);

これする必要性がわからないので何とも言えませんが。
上記でお力になれてればうれしいです。

Comments

[satoshickkk]

fade系を使わなくてもできるのは知りませんでした。
いただきました上記のコードで思い通りの動きになりました。
お助けいただき本当にありがとうございました！