0

私はjQueryにかなり慣れていないので、次のように質問します。

3つのdivで動作する3つの条件付きアニメーションがあります。

var viewport = $(window).width();
if ( viewport < 1400 ) { 
     $("#panel").animate({marginLeft:"-175px"}, 500 );
     $("#colleft").animate({width:"0px", opacity:0}, 400 );
     $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
     $("#colright").animate({marginLeft:"50px"}, 500);
}else{
     $("#colright").fadeIn('slow').animate({marginLeft:"200px"}, 200);
     $("#panel").fadeIn('slow').animate({marginLeft:"0px"}, 400 );
     $("#colleft").fadeIn('slow').animate({width:"190px", opacity:1}, 400 );
     $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
}

ご覧のとおり、これはビューポートに基づいてアニメーションを実行しています。

$(window).resize(function() {これらの条件をとで繰り返す必要があり$("#hidePanel").click(function(e){ます。

コードを繰り返す必要がありますか、それとも変数に割り当てることができますか？

編集

次の関数は、条件付きで機能しません。

function collapseMenu(){
    $("#panel").animate({marginLeft:"-175px"}, 500 );
    $("#colleft").animate({width:"0px", opacity:0}, 400 );
    $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
    $("#colright").animate({marginLeft:"50px"}, 500);
}

if ( viewport < 1400 ) { 
     collapseMenu();
}
4

3 に答える 3

0

アニメーションコードを関数としてリファクタリングする場合は、次の方法でそれらをイベントにバインドできます。

$(window).resize(animateDivs);
$("#hidePanel").click(animateDivs);
于 2012-10-04T15:06:03.793 に答える
0

すべてを関数でラップするのはどうですか？

function runAnimation(){
    var viewport = $(window).width();
    if ( viewport < 1400 ) { 
        $("#panel").animate({marginLeft:"-175px"}, 500 );
        $("#colleft").animate({width:"0px", opacity:0}, 400 );
        $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
        $("#colright").animate({marginLeft:"50px"}, 500);
    }else{
        $("#colright").fadeIn('slow').animate({marginLeft:"200px"}, 200);
        $("#panel").fadeIn('slow').animate({marginLeft:"0px"}, 400 );
        $("#colleft").fadeIn('slow').animate({width:"190px", opacity:1}, 400 );
        $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
    }
 }

したがって、後で簡単に呼び出すことができます。

$(window).resize(function() {
    runAnimation();
    //.... 
});

$("#hidePanel").click(function(e){
    runAnimation();
    //.... 
});
于 2012-10-04T15:06:04.270 に答える
0

行う

function widthHanadler() {
    if ( viewport < 1400 ) { 
         $("#panel").animate({marginLeft:"-175px"}, 500 );
         $("#colleft").animate({width:"0px", opacity:0}, 400 );
         $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
         $("#colright").animate({marginLeft:"50px"}, 500);
    }else{
         $("#colright").fadeIn('slow').animate({marginLeft:"200px"}, 200);
         $("#panel").fadeIn('slow').animate({marginLeft:"0px"}, 400 );
         $("#colleft").fadeIn('slow').animate({width:"190px", opacity:1}, 400 );
         $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
    }
}

この関数をイベントにバインドします。

$(window).resize(widthHanadler);
$("#hidePanel").click(widthHandler);
于 2012-10-04T15:06:07.333 に答える