slideUpは方向の指定ができないのでjquery-uiでどうでしょうか?
上下に開くのがd1,d2、左右に開くのがd3,d4
javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
3<script>
4$(function(){
5 var d1=$('<div>').css({"position":"absolute","background-Color":"yellow","height":"50%","width":"100%","top":"0px","left":"0px","z-index":"3"});
6 var d2=d1.clone().css({"top":"50%"});
7 var d3=$('<div>').css({"position":"absolute","background-Color":"lime","height":"100%","width":"50%","top":"0px","left":"0px","z-index":"2"});
8 var d4=d3.clone().css({"left":"50%"});
9 d1.appendTo('body');
10 d2.appendTo('body');
11 d3.appendTo('body');
12 d4.appendTo('body');
13 $.when(
14 d1.hide("slide", {direction: "up"}, 1000),
15 d2.hide("slide", {direction: "down"}, 1000)
16 ).done(function(){
17 d3.hide("slide", {direction: "left"}, 1000);
18 d4.hide("slide", {direction: "right"}, 1000);
19 });
20});
21</script>
プログレスバー付き
読み込み状況によって進捗をあげる必要がありますが、概ねこんな感じです
実際には非同期での部品の呼び出しを$.whenに列記すると
すべての非同期処理をまってdoneされるような流れになると思います
実際に実装してみてわからなければ聞いてください
javascript
1<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
2<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
3<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
4<script>
5$(function(){
6 var d1=$('<div>').css({"position":"absolute","background-Color":"yellow","height":"50%","width":"100%","top":"0px","left":"0px","z-index":"3"});
7 var d2=d1.clone().css({"top":"50%"});
8 d1.appendTo('body');
9 d2.appendTo('body');
10 var d = $.Deferred();
11 var count=0;
12 var progressbar = $( "#progressbar" ).css({top:"50%",position:"absolute",width:"99%","z-index":"4","background-Color":"gray"});
13 var progressLabel = $( ".progress-label" ).css({float:"left","margin-left":"50%","margin-top":"5px","font-weight":"bold","text-shadow":"1px 1px 0 #fff"});
14 var timerId=0;
15 $.when(
16 d.promise(timerId=setInterval(function(){
17 progressbar.progressbar({
18 value: (count+1)*10,
19 change: function() {
20 progressLabel.text( progressbar.progressbar( "value" ) + "%" );
21 },
22 create:function(event, ui){
23 $(this).find('.ui-widget-header').css({'background-color':'aqua'});
24 }
25 });
26 if(count>=10){
27 clearInterval(timerId);
28 d.resolve();
29 }
30 count++;
31 },300))
32 ).done(function(){
33 progressbar.remove();
34 d1.hide("slide", {direction: "up"}, 1000);
35 d2.hide("slide", {direction: "down"}, 1000)
36 });
37});
38</script>
39<div id="progressbar"><div class="progress-label">Loading...</div></div>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/16 05:01 編集
2018/10/16 05:04
2018/10/16 07:46
2018/10/16 08:02
2018/10/26 19:18