jQueryを使用して1つのdivを非表示にして別のオーバートップを表示するときにスライド遷移を行います

Question

jQueryまたはpure cssを使用してスライドアップエフェクトを作成しようとしています。

私はコンテナdivを持ち、その中に2つのコンテンツdivがあります。私はthis demoの最初のタイルのような効果をマウスのホバーとマウスの上に出たいと思います。

私の現在のコードのhttps://jsfiddle.net/jfyacwvg/をご覧ください。 Item 1をホバリングすると、段落が表示されます。これは問題ありませんが、何らかのスライド効果で表示させたいのです。

アイテム1をホバリングしたときにアイテム2と3が変更されていることを気にしないでください。後で修正する必要があります。 htmlです。ここ

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

：このJSFiddleで

<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

見て、それが中で行われている。ここ

はショーを隠すために私のJavaScriptコードではなく、すべてのためにjsfiddleのリンクを参照してください。 CSS。 div内部

https://jsfiddle.net/de8L2f1L/

pの位置が正常であると同じようtop: 0px;です。 pにカーソルを合わせると、top: -200pxが2秒のトランジションで上に移動します（変更可能）。 -200pxに変更する理由は、divの高さが200pxであるためです。

overflow: hiddenは、pのサイズで拡大しないようにdivに適用されました。

あなたが心配する必要があることの1つは、img,pなどがdivの2倍以上の高さにならないということです。中間にコンテンツが欠落しているため、下に隠れてしまうからです上に隠されている。

Answer 2

ちょうどslideUp/slideDownための表示/非表示を変更です：

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

あなたのフィドル更新：

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