-1

これはここで完全に回答されています: リンク 私がこれを書いたJavaScriptコードを整理するためのこの最良の方法は何ですか?

jQuery("document").ready(function(jQuery){

if ( jQuery(window).width() < 960) {
        jQuery(".main").animate({"top":"22%"});
        jQuery('#tblcontents').toggle(function(){
        jQuery(".main").fadeOut(1000);
         }, function(){ 
        jQuery(".main").fadeIn(1000);
        jQuery(".main").animate({"top":"22%"});

    });

}
else {
}

    jQuery('.menu-button').click(function(){
    jQuery("#sb-container div").css("transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-webkit-transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-ms-transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-moz-transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-o-transform", "rotate(0deg)"  );
    jQuery(".main").animate({"right":"1%"}, "slow");
});

jQuery(function(){
    jQuery('.toggle_div').toggle(function(){
    jQuery(".main").animate({"right":"50%"}, "slow");
 }, function(){ 
    jQuery(".main").animate({"right":"1%"}, "slow");
    });
});

jQuery(".pulse").effect("pulsate", { times:100 }, 2000).click(function(){
    jQuery(".pulse").effect().stop(true, true);
    jQuery(".pulse").animate({"opacity":"1"}, "fast");
});
    jQuery('.thumb').click(function(){
    jQuery("#sb-container div").css("transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-webkit-transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-ms-transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-moz-transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-o-transform", "rotate(0deg)"  );
    jQuery("#sb-container").animate({"left":"0px"}, "slow");
    jQuery(".main").animate({"right":"1%"}, "slow");
    });

jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 20) {
    jQuery("#sb-container div").css("transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-webkit-transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-ms-transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-moz-transform", "rotate(0deg)"  );
    jQuery("#sb-container div").css("-o-transform", "rotate(0deg)"  );
    jQuery(".main").animate({"right":"1%"}, "slow");

    } else{
            jQuery( "#sb-container" ).draggable()
    }
});

});

     jQuery(function() {
jQuery( "#sb-container" ).draggable()
});

ここに示されているコードの量を減らすにはどうすればよいですか? ベスト プラクティスとは何ですか? また、ほとんどの場合、関数が含まれていないため、ウィンドウ幅を照会するelseステートメントが必要ですか。クリス

4

1 に答える 1

2

次のようにスタイルを一括設定することで、コードの一部のコンポーネントをクリーンアップできます。

// it looks like you reuse this same set of styles in a few places
// define them once as a variable and assign as needed
var defaultStyles = 
{
    "transform": "rotate(0deg)",
    "-webkit-transform": "rotate(0deg)",
    "-ms-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "-o-transform": "rotate(0deg)"
};

jQuery('.menu-button').click(function() {
    jQuery("#sb-container div").css(defaultStyles);
    jQuery(".main").animate({"right":"1%"}, "slow");
});

jQuery('.thumb').click(function(){
    jQuery("#sb-container div").css(defaultStyles);
    jQuery("#sb-container").animate({"left":"0px"}, "slow");
    jQuery(".main").animate({"right":"1%"}, "slow");
});

if (jQuery(this).scrollTop() > 20) {
    jQuery("#sb-container div").css(defaultStyles);
    jQuery(".main").animate({"right":"1%"}, "slow");
}
于 2013-03-29T13:47:53.730 に答える