無限ループで2つの要素を重ねて表示する方法

Question

ヘッダーを消してしまい、ヘッダー2が消えて見えなくなり、ヘッダー1がループに表示されます。私のコードの問題は、ヘッダー2が非常に短い時間だけ表示され、ヘッダー1が表示される前に空の画面が少なくとも2-3秒続くことです。

JS：

var h1 = $('.header_one'); 
var h2 = $('.header_two'); 

setInterval(function(){ 
    h1.fadeOut(1000); 
    h2.fadeIn(1000); 
    h2.fadeOut(2000, function() { h1.fadeIn(); }); 
}, 4000); 

HTML：

<h1 class="header_one"> HEADER ONE </h1> 
<h2 class="header_two"> HEADER TWO </h2> 

はCSS：

h1, h2 { 
    z-index: 10; 
    position: relative; 
}  

h2 {display: none;} 

問題もあります。ヘッダー2が消滅し、H1とH2の下に私の2つのリンクが、 positionに設定されている：relative;ページの上部に移動します。

Answer 1

ここでそれを行うための一つの方法です：jsfiddle

$("#box1").hide(); 
 

 

 
function animate() { 
 
    $("#box2").fadeOut(1000, function() { 
 
    $("#box1").fadeIn(1000, function() { 
 
     $("#box1").fadeOut(1000, function() { 
 
     $("#box2").fadeIn(1000, animate); 
 
     }); 
 
    }); 
 
    }); 
 
} 
 

 
animate();

div { 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 20px; 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
div:nth-child(2) { 
 
    left: 30px; 
 
    top: 30px; 
 
    background: blue; 
 
}

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

Answer 2

ヘッダーが消えたときにリンクが動く理由は、fadeInとfadeOutが文書の流れからそれを削除するプロパティを操作しているためです。 visibilityプロパティのみが要素の位置を保持し、その領域を確保します。

あなたの2つのヘッダーがスタイリングの点で同じであると仮定すると、カラー/透明度をアニメートするときに1つしか使用せず、その内部のテキストを変更しないでください。

しかし、実際にあなたのコードを指定してそれらを順番に実行したいのであれば、最後の行で何をしたのかが必要です。しかし、これはあなたのリンクの問題を動かす問題を解決しません。

これはそれを行うのは本当に厄介な/悪い方法ですが、それが動作する...

setInterval(function(){ 
    $('h1').fadeOut(function(){ 
     $('h2').fadeIn(); 
    }); 
}, 4000); 

setInterval(function(){ 
    $('h2').fadeOut(function(){ 
     $('h1').fadeIn(); 
    }); 
}, 8000); 

Answer 3

これはjqueryでループを実行する私の選択ですanimate：

https://jsfiddle.net/vbw8jLko/

var h1 = $('.header_one'); 
var h2 = $('.header_two'); 

function loop(){ 
console.log('llop'); 
    $(".header_one").stop().css('opacity', 0).show().animate({opacity:1}, 700).delay(700).animate({ 
    opacity: 0 
    }, 1000, function(){ 
    $(this).hide(); 
    $(".header_two").stop().css('opacity', 0).show().delay(100).animate({ 
    opacity: 1 
    }, 1000).delay(700).animate({opacity:0}, 1000, function(){ 
    $(this).hide(); loop()}); 
    }); 

} 

loop(); 

それは