1

クールなアニメーションを作るためにjqueryを学んでいます。現在、拡大、縮小、不透明度の変更も行う写真の割り当てが与えられており、最終的には非表示になります。

これが私のコードです：

function play_pic1()
{
    var div = $("#img");
    div.animate({width:0},2000);
    div.animate({width:1100,opacity:0},4000);
    div.animate({opacity:1},4000);
    div.hide(4000);
}

$(document).ready(function(){
         play_pic1();
         play_pic1();       
});

問題は、1 つの画像に対してのみ機能することです。2 番目の画像を挿入しようとすると、2 番目の画像が静的になります。

Loops と Function を使用しましたが、何も役に立ちませんでした。この問題を克服するのを手伝ってください。

4

5 に答える 5

2

アニメートしたい要素を関数のパラメーターとして渡すことができます。

function play_pic1(element)
{
    var div = $(element);
    div.animate({width:0},2000)
       .animate({width:1100,opacity:0},4000)
       .animate({opacity:1},4000)
       .hide(4000);
}

$(document).ready(function(){
         play_pic1("#img1");
         play_pic1("#img2");       
});

OPの明確化後：さまざまな要素に連続したアニメーションが必要な場合はDeferred objects、そのように使用できます

JSBin の例: http://jsbin.com/ilisug/1/edit

function animate(el)
{
    var div = $(el);
    return div.animate({width:0},2000)
       .animate({width:300,opacity:0},2000)
       .animate({opacity:1},2000)
       .hide(2000);
}

$(document).ready(function(){

    var dfd = $.Deferred(), 
        chain = dfd;

    var slide = ['#el1', '#el2', '#el3'];

    $.map(slide, function(el) {
        chain = chain.pipe(function() {
            return animate(el).promise();
        });
    });

    chain.done(function() {
       alert('done')
    });

    return dfd.resolve();
});
于 2013-01-08T08:55:05.597 に答える
1

は最初の#img画像にのみ適用されます。セレクターを引数として渡す必要がありますplay_pic1()

function play_pic1(elem)
{
    var div = $(elem);
    //your code here
}

$(document).ready(function(){
         play_pic1("#img"); //pass the img selector to play_pic1
         play_pic1("#img2");       
});
于 2013-01-08T08:57:26.007 に答える
1

これは、すべての div を 1 つの ID で取得することはできないためです。HTML ドキュメント内で可能な id の出現は 1 つだけです。

クラス ( <div class=img></div>) を使用して置き換える必要があります

var div = $("#img");

と

var div = $(".img");
于 2013-01-08T08:56:04.413 に答える
1 
var div = $("#img");

上記のステートメントは、#img のみが参照されることを示しています。画像を動的に追加するときは、コードを少し変更する必要があります。この関数に ID を渡して、アニメーションを適用してみてください。何かのようなもの

function play_pic1(id)
{
    var div = $(id);
    div.animate({width:0},2000);
    div.animate({width:1100,opacity:0},4000);
    div.animate({opacity:1},4000);
    div.hide(4000);
}
于 2013-01-08T08:56:15.383 に答える
1

あなたの問題は、複数の要素に sameID を使用する#imgと、最初の要素にのみ影響すると思います。

.img代わりに、クラスと次のコードを使用できます。

function play_pic1(){
 $(".img").each(function(){
   var div = $(this);
   div.animate({width:0},2000);
   div.animate({width:1100,opacity:0},4000);
   div.animate({opacity:1},4000);
   div.hide(4000); 
 });
}

$(document).ready(function(){
   play_pic1();     
});

クラスを使ってみる$(".img")

于 2013-01-08T09:03:29.730 に答える