Verwenden von jQuery, um einen Folienübergang auszuführen, wenn ein div verborgen und ein anderer Overhead davon angezeigt wird

Question

Ich versuche, einen Folieffekt mit jQuery oder reinem css zu erstellen.

Ich habe einen Container div und dann 2 Inhalt Divs innen. Ich würde gerne einen Effekt wie in der ersten Kachel in this demo auf Maus-Hover und Mouse-Out erreichen.

Bitte beachten Sie diese https://jsfiddle.net/jfyacwvg/ meines aktuellen code. Sie werden feststellen, dass der Absatz erscheint, wenn Sie über Punkt 1 schweben. Das ist in Ordnung, aber ich möchte, dass es mit einer Art Slide-Effekt erscheint.

Bitte beachten Sie, dass sich Punkt 2 und 3 ändern, wenn Sie den ersten Punkt schweben. Das muss ich später beheben.

Hier ist mein JavaScript-Code anzeigen zu verstecken, aber bitte auf den jsfiddle Link für alles sehen:

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

Hier ist die 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

Schauen Sie sich das JSFiddle, wird es getan in CSS.

https://jsfiddle.net/de8L2f1L/

Die Position des p innerhalb des div ist am top: 0px; so wie es normalerweise wäre. Wenn Sie den Mauszeiger über die bewegen, bewegt er sich dann nach oben, top: -200px mit einem Übergang von 2 Sekunden (was geändert werden kann). Der Grund für die Änderung auf -200px ist, dass die Höhe von div 200px ist.

overflow: hidden wurde auf das div angewendet, um zu verhindern, dass es sich mit der Größe des ausdehnt.

Eine Sache, um die Sie sorgen müssen, ist, dass Ihre img, p, etc nicht mehr als zweimal Höhe des div überspannen, weil Sie dann immer den Inhalt in der Mitte fehlen würde, wie es von unten versteckt werden würde oben versteckt sein.

Answer 2

Es ist nur die hide/show für/slidedown slideUp ändern:

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

Ihre Geige aktualisiert:

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