隐藏一个div并显示另一个div时使用jQuery进行幻灯片过渡

Question

I am attempting to create a slide up effect using jQuery or pure css.

I have a container div and then 2 content divs inside. I would like to achieve an effect like in the first tile in this demo on mouse hover and mouse out.

Please see this https://jsfiddle.net/jfyacwvg/ of my current code. You will notice that when hovering over Item 1 the paragraph appears. This is fine but I want it to appear with some sort of slide effect.

Please do not mind the fact that Item 2 and 3 change when hovering Item 1, I will have to fix that later on.

Here is my JavaScript code to hide show, but please see the jsfiddle link for everything:

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

Here is the 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

It's just change the hide/show for slideUp/slideDown:

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

Your fiddle updated:

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

Answer 2

Look at this JSFiddle, it is done in CSS.

https://jsfiddle.net/de8L2f1L/

The position of the p inside the div is at the top: 0px; just as it normally would be. When you hover over the p it then moves up, top: -200px with a transition of 2 seconds (which can be changed). The reason it is set to change to -200px is because the height of your div is 200px.

overflow: hidden was applied to the div to keep it from expanding with the size of the p .

One thing you need to worry about is that your img , p , etc do not span more than twice height of the div because you would then always be missing the content in the middle as it would go from being hidden below to being hidden above.