なぜ私のdivsはfadeOut私がフェードインに戻ってくる？

Question

私は8つのdivを消して、別のdivを表示させるhrefを作った。新しいdivを閉じると、divの1つだけが表示されます。

$(document).ready(function() { 
    $("#personBtnOne").click(function alki() { 
     $("#personTwoBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
     $("#personThreeBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
     $("#personFourBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
     $("#personFiveBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
     $("#personSixBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
     $("#personSevenBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
     $("#personEightBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
     $("#personOneBoxID").addClass('animated bounceOutLeft').fadeOut(1600); 
     $('#personOneHiddenDiv').delay(1600).addClass('animated fadeInRightBig').fadeIn(1600); 
    }); 
}); 

$(document).ready(function() { 
    $('#closure').click(function close() { 
     $('#personOneHiddenDiv').addClass('animated fadeOutRightBig').fadeOut(1600); 
     $('#personOneBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
     $('#personTwoBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
     $('#personThreeBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
     $('#personFourBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
     $('#personFiveBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
     $('#personSixBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
     $('#personSevenBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
     $('#personEightBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
    }); 
}); 

Answer 1

たとえばあなたがpersonbtoneクリック、にfaseoutright persontwoboxにしたクラスを追加することなく、閉鎖に同じクラスがクリック削除されていない、あなたがそれらを追加した後、クラスを削除していない、これを試してみてください

faseoutrightを削除する必要があります。fadeInLeftBigを追加するには、これはすべてpersonbox要素に対して行う必要があります。ここ

$("#personBtnOne").click(function alki() { 
$("#personTwoBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
}); 



$('#closure').click(function close() { 
$('#personTwoBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
}); 

はフィドルリンク https://jsfiddle.net/vfrs0yss/

$(document).ready(function() { 
 
    $("#personBtnOne").click(function alki() { 
 
    $('.box').removeClass('animated bounceOutLeft fadeOutRight fadeInLeftBig fadeOutRightBig'); 
 
    $("#personTwoBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
 
    $("#personThreeBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
 
    $("#personFourBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
 
    $("#personFiveBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
 
    $("#personSixBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
 
    $("#personSevenBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
 
    $("#personEightBoxID").addClass('animated fadeOutRight').fadeOut(1600); 
 
    $("#personOneBoxID").addClass('animated bounceOutLeft').fadeOut(1600); 
 
    $('#personOneHiddenDiv').delay(1600).addClass('animated fadeInRightBig').fadeIn(1600); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $('#closure').click(function close() { 
 
    $('.box').removeClass('animated bounceOutLeft fadeOutRight fadeInLeftBig fadeOutRightBig'); 
 

 
    $('#personOneHiddenDiv').addClass('animated fadeOutRightBig').fadeOut(1600); 
 
    $('#personOneBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
 
    $('#personTwoBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
 
    $('#personThreeBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
 
    $('#personFourBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
 
    $('#personFiveBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
 
    $('#personSixBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
 
    $('#personSevenBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
 
    $('#personEightBoxID').addClass('animated fadeInLeftBig').fadeIn(); 
 
    }); 
 
});

.button, 
 
    .box { 
 
     padding: 10px; 
 
     background: #eee; 
 
     border: 1px solid #ccc; 
 
     text-align: center; 
 
     display: inline-block; 
 
     width: 50px; 
 
     cursor: pointer; 
 
     margin: 10px 15px; 
 
     transition: all ease 0.6s; 
 
    } 
 
    :hover.button, 
 
    :hover.box { 
 
     background: #fff; 
 
     border: 1px solid #848484; 
 
    } 
 
    .box { 
 
     width: 100px; 
 
     background: #CDDC39; 
 
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 

 

 
<div id="personBtnOne" class="button"> 
 
    Open 
 
</div> 
 

 
<div id="closure" class="button"> 
 
    Close 
 
</div> 
 
<div class="boxHolder"> 
 

 
    <div id="personOneHiddenDiv" class="box"> 
 
    P1 Hidden Box 
 
    </div> 
 

 
    <div id="personOneBoxID" class="box"> 
 
    P1 Box 
 
    </div> 
 

 
    <div id="personTwoBoxID" class="box"> 
 
    P2 Box 
 
    </div> 
 

 
    <div id="personThreeBoxID" class="box"> 
 
    P3 Box 
 
    </div> 
 
    <div id="personFourBoxID" class="box"> 
 
    P4 Box 
 
    </div> 
 
    <div id="personFiveBoxID" class="box"> 
 
    P5 Box 
 
    </div> 
 
    <div id="personSixBoxID" class="box"> 
 
    P6 Box 
 
    </div> 
 
    <div id="personSevenBoxID" class="box"> 
 
    P7 Box 
 
    </div> 
 

 
    <div id="personEightBoxID" class="box"> 
 
    P8 Box 
 
    </div> 
 

 
</div>

これが役に立てば幸い..です:)

は

Answer 2

私が正しく覚えていれば、時間枠（アニメーションの長さ）を設定する必要があります。上記のように私は携帯電話にいるのであまり役に立たない。それは私が得た最高のことだ。

Answer 3

最後のコード行でfadeinを呼び出すために1つのdiv（$ personiBoxID）のみが選択されているため、1つのdivだけがフェードインします。これを試してみてください：

$（ '＃personOneBoxID、#personTwoBoxID、#personThreeBoxId、#personFourBoxID、#personFiveBoxID、#personSixBoxID、#personSevenBoxID、#personEightBoxID'）フェードイン（）;。

すべてのフェードアウトdivを選択し、すべてのフェードアウトdivを呼び出します。

Answer 4

CSSが表示されないと難しいですが、fadeOutクラスのremoveClassをclose()クラスの関数で実行する必要があります。またはtoggleClassを使用してください。彼らがfadeInクラスのときにフェードバックします。