Question

我对jQuery很新，所以我问：

我有3个条件动画在三个div上运行：

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();
}

Answer 1

如果您将动画代码重构为函数，则可以按以下方式将它们绑定到事件。

$(window).resize(animateDivs);
$("#hidePanel").click(animateDivs);

Answer 2

将所有内容包装在函数中怎么样？

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();
    //.... 
});

Answer 3

待办事项

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);

在jquery中为一个变量分配一堆动画？

3 个答案: