0

我对 jQuery 相当陌生，所以我问：

我在三个 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 回答