スライドの背景の表示と非表示

Question

ボタンをクリックすると、背景が表示されなくなります。もう一度ボタンをクリックすると、そのボタンをクリックするとバックグラウンドが表示されます。

animate()を使用して背景の位置を変更してみましたが、背景の画像を移動する最も良い方法が何であるか分かりません。

以下のコードでは、スライドがすべての画面サイズで動作することを確認するために、ユニットとして「px」を使用しないようにしました。

この効果を得るにはどうすればよいでしょうか？ px、vh、または%を使用する必要がありますか？

$("#slide").click(function() { 
 
    $(".container").delay(100).animate({ 
 
     'background-position-y': '600%' 
 
    }, 800, 'linear'); 
 

 
    $(".processHeader").delay(1000).toggle("blind", { 
 
     direction: "up" 
 
    }, 600); 
 

 
    $(".processContent").delay(2000).toggle("blind", { 
 
     direction: "up" 
 
    }, 600); 
 
}); 
 

 
$(".next").click(function() { 
 
    $(".container").delay(100).animate({ 
 
     'background-position-y': '-600%' 
 
    }, 800, 'linear'); 
 

 
    $(".processHeader, .processContent, .step4, .next").delay(200).fadeOut(500); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

あなたは、クロスブラウザの互換性があり、それが参照されたときに、現在の画面サイズを引っ張る、画面サイズを決定するためにjQuery(window).width()を使用したいと思うでしょう。

これは、ウィンドウのサイズが変更されていない限り有効です。サイズ変更が発生したときにも隠された画像を保存したい場合は、あなたの巣このresizeイベントでの希望：

window.onresize = function(event) { 
    ... 
}; 

Answer 2

あなたは上、下、左、右のCSSコマンドを使用する必要があります。同じ方法でアニメートすることができ、divの参照として使用されます。たとえば、divにスタイルtop:0;left:0を与えると、左上隅に固定されます。

top:100%;left:100%にアニメーションを付けて非表示にすることができます。

Hiding a background example