隱藏一個div並顯示另一個div時使用jQuery進行幻燈片過渡

Question

我正在嘗試使用jQuery或純CSS創建向上滑動效果。

我有一個容器div，然后在其中有2個內容div。 我想在鼠標懸停和鼠標移出時獲得類似於本演示中的第一個圖塊的效果。

請查看我當前代碼的https://jsfiddle.net/jfyacwvg/ 。 您會注意到，將鼠標懸停在項目1上時，將出現該段落。 很好，但是我希望它以某種幻燈片效果出現。

請不要介意第2項和第3項在懸停第1項時發生變化，我稍后將不得不對其進行修復。

這是我要隱藏顯示的JavaScript代碼，但是請查看jsfiddle鏈接以獲取所有信息：

$(".card").hover(
  function () {
      $(".content-1").hide();
      $(".content-2").show();
  }, function() {
      $(".content-2").hide();
      $(".content-1").show();
    }
);

這是html：

<div class="container">

<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="content-1" style="height: 300px">
                     <img src="http://placehold.it/350x150" class="img-responsive" style="margin-left: auto; margin-right: auto;" />
                     <h3 class="text-center">Item 1</h3>
                    </div>
                    <div class="content-2" style="display: none; height: 300px;">
                        <p style="margin:30px 0 30px 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="content-1" style="height: 300px">
                     <img src="http://placehold.it/350x150" class="img-responsive" style="margin-left: auto; margin-right: auto;" />
                     <h3 class="text-center">Item 2</h3>
                    </div>
                    <div class="content-2" style="display: none; height: 300px;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                                <div class="card">
                    <div class="content-1" style="height: 300px">
                     <img src="http://placehold.it/350x150" class="img-responsive" style="margin-left: auto; margin-right: auto;" />
                     <h3 class="text-center">Item 3</h3>
                    </div>
                    <div class="content-2" style="display: none; height: 300px;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>

Answer 1

只是更改了slideUp / slideDown的隱藏/顯示：

        $(".card").hover(
      function () {
          $(".content-1").slideUp();
          $(".content-2").slideDown();
      }, function() {
          $(".content-2").slideUp();
          $(".content-1").slideDown();
        }
    );

您的小提琴已更新：

https://jsfiddle.net/jfyacwvg/2/

Answer 2

看看這個JSFiddle，它是用CSS完成的。

https://jsfiddle.net/de8L2f1L/

p在div內的位置在top: 0px; 像往常一樣。 當您將鼠標懸停在p它會向上移動top: -200px ，過渡為2秒（可以更改）。 之所以將其設置為-200px，是因為div的高度為200px。

overflow: hidden對div應用了overflow: hidden ，以防止其隨着p的大小而擴展。

您需要擔心的一件事是， img ， p等的跨度不會超過div高度的兩倍，因為那樣一來，您始終會丟失中間的內容，因為它的內容會從隱藏在下方變為隱藏在上方。