javascript - 画像をブラウザウィンドウに飛ばしてからフェードアウトする方法は？

Question

画像をブラウザ ウィンドウに飛ばしてフェードアウトさせる方法。1 つの画像が左側からブラウザ ウィンドウに飛び込んでフェードアウトする必要があります。そして次の写真。私は5枚の写真を持っています。私は彼らにこれを1つずつ、何度も何度も行う必要があります。以下は私のコードです：うまくいきません。方法 1: 5 枚の写真で、id は "#Slogan0"、"#Slogan1"、... などです。最初は「左」が「-1000px」、最初が「表示」が「ブロック」、他が「なし」で、消えるように変更できるようになっています。 .

var sloganidPre = "#Slogan";
var slogannum = 0;
sloganid = sloganidPre + slogannum;
window.onload = function(){ 
moveNext();
}

function moveNext(){
cf.moveTo("next");  

if($(sloganid).css("display") == "block") {

    slogannum = (slogannum+1)%5;

    $(sloganid).css("display","none");
    sloganid=sloganidPre+slogannum;
    $(sloganid).css("display","block");
    $(sloganid).animate({left:"30px"});
        $(sloganid).css("opacity","0.2");
}

setTimeout(moveNext, 1500);
}

Method2: 親ノードに新しい要素を作成します。

var sloganidPre = "Slogan";
var slogannum = 0;
var sloganid = "#"+sloganidPre + slogannum;

window.onload = function(){ 

$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;display:block;\"\"><img src=\"img/"+sloganidPre+slogannum+".png\"  /></div>");
$(sloganid).animate({left:'30px',opacity:'0.2'});

moveNext();
}

function moveNext(){

cf.moveTo("next"); 
$("#sloganparent:first-child").empty();

slogannum = (slogannum+1)%5;
sloganid= "#"+sloganidPre+slogannum;

$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;\"><img src=\"img/"+sloganidPre+slogannum+".png\"  /></div>");

var i=0;
for (i=-1000; i<30; i++) {
    document.getElementById(new String(sloganid)).style.left= new String("\""+i+"px\"");
}
setTimeout(moveNext, 1500);                     
}

Jquery は、動的に作成された要素を取得していないようです。2 つの方法はうまく機能しません。とにかく、タイトルが言ったように写真を展開する方法を知りたいだけです。どの方法でも構いません。ご検討いただきありがとうございます。