javascript - 隐藏一个 div 并显示另一个 overtop 时使用 jQuery 进行幻灯片转换

Question

我正在尝试使用 jQuery 或纯 css 创建向上滑动效果。

我有一个容器 div，然后里面有 2 个内容 div。我想实现类似于 this demo 中第一个图 block 的效果在鼠标悬停和鼠标移开时。

请看这个https://jsfiddle.net/jfyacwvg/我当前的代码。您会注意到，当将鼠标悬停在元素 1 上时，会出现该段落。这很好，但我希望它以某种幻灯片效果出现。

请不要介意将元素 1 悬停时元素 2 和 3 会发生变化，我稍后会解决这个问题。

这是我隐藏显示的 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();
        }
    );

您的 fiddle 已更新:

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