1

ここに簡単な JSFiddle の例があります: http://jsfiddle.net/LKwmW/

見てみると、「変更」ボタンをクリックすると、赤い div が完全にフェードアウトしてから、青い div がフェードインします。ほぼブレンドしたいので、基本的にはフェードインとフェードアウトを同時に行いますが、お互いの上にとどまります。ただし、可能であれば、テキストが乱雑に見えるため、融合してブレンドしないことをお勧めします. ブレンドが行われた後、テキストがフェードインする可能性がありますか?

HTMLは次のとおりです。

<button id="change">Change </button>

<div id="box1">
    <p> Hello, this is text1 </p>
</div>

<div id="box2">    
    <p> Goodbye, this is text2 </p>

</div>

jQuery は次のとおりです。

$('#box2').hide()

$('#change').click(function(){
    $('#box1').fadeOut(800, function(){
        $('#box2').fadeIn(800);
    });

});

どうすればこれを達成できますか？

4

3 に答える 3

2

コールバックを削除し、要素を互いの上に配置するだけです:

$('#box2').hide()

$('#change').click(function(){
    $('#box1').fadeOut(800);
    $('#box2').fadeIn(800);
});

フィドル

テキストは要素内にあり、要素とともにフェードアウトするため、テキストを要素の外に移動するか、CSS トランジションを使用して背景色だけをアニメーション化する必要がなくなります。

于 2013-05-25T16:54:23.977 に答える
0

animate複数を持たずに使用して効果を達成することもできますdiv

このようなことを試してください

$('#box2').hide()

$('#change').click(function(){
   $("#box1").animate({
       backgroundColor:"blue"
  }, 1500 );
});

JS フィドルのデモ

于 2013-05-25T17:01:41.247 に答える
0

切り替えられるdivのサイズがわかっている場合、Adeneoの答えはうまく機能します。ここでは、身長がわからない場合と子の身長が異なる場合の解決策を示しますが、親には大きい方の子の身長を使用させたいと考えています。

これにより、コンテンツを切り替えるときに、比較する div の下のすべてを「ジャンプ」させることなく、2 つの div の違いを比較できます。主なアイデア: グリッドを使用して配置し、不透明度を使用して前景の div を非表示にします。

jQuery.fn.visible = function(duration) {
    this.animate({opacity: 1.0}, duration);
};

jQuery.fn.invisible = function(duration) {
    return this.animate({opacity: 0}, duration);
};

var b = false;
$('#change').click(function(){
    if(b){
    $('.child2').visible(1000);
  } else {
    $('.child2').invisible(1000);
  }
  b = !b;
});
.parent {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid black;
}
.child1 {
    grid-row-start: 1;
    grid-column-start: 1;
    background-color: yellow;
}
.child2 {
    grid-row-start: 1;
    grid-column-start: 1;
    background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="change">Toggle child 1</button>

<div class="parent">
    <div class="child1">child 1</div>
    <div class="child2">child 2</div>
</div>
<br/>
<div class="parent">
    <div class="child1">child 1<br/>very long content</div>
    <div class="child2">child 2</div>
</div>
<br/>
<div class="parent">
    <div class="child1">child 1</div>
    <div class="child2">child 2<br/>very long content</div>
</div>

于 2020-01-17T09:00:40.443 に答える