javascript - Replace content in div with other content using a slide up transition with jQuery - Stack Overflow

I have 2 divs like the following:

<div id="content">
    Content 1
</div>
<div id="rollover-content" style="display: none;">
    Content 2
</div>

How can I make it so when the #content div is hovered over by the mouse the #rollover-content div does a 'slide up' transition effect and takes over. Then when the mouse is off of the div #content will slide back.

If you go to this demo and hover over the first tile you will see the effect I am looking for, but I am trying to do it with straight jQuery.

I created the following css class which is a nice container to create a card:

.card {
        position: relative;
        margin: 0.5rem 0 1rem 0;
        background-color: #F1F1F1;
        transition: box-shadow .25s;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        padding: 20px;
}

How can I do these transitions in a div with this class wrapped around it?

I have 2 divs like the following:

<div id="content">
    Content 1
</div>
<div id="rollover-content" style="display: none;">
    Content 2
</div>

How can I make it so when the #content div is hovered over by the mouse the #rollover-content div does a 'slide up' transition effect and takes over. Then when the mouse is off of the div #content will slide back.

If you go to this demo and hover over the first tile you will see the effect I am looking for, but I am trying to do it with straight jQuery.

I created the following css class which is a nice container to create a card:

.card {
        position: relative;
        margin: 0.5rem 0 1rem 0;
        background-color: #F1F1F1;
        transition: box-shadow .25s;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        padding: 20px;
}

How can I do these transitions in a div with this class wrapped around it?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Apr 1, 2016 at 20:33 Blake Rivell asked Apr 1, 2016 at 19:57 Blake RivellBlake Rivell 13.9k3333 gold badges130130 silver badges261261 bronze badges 1

• $('#content').on('mouseenter mouseleave', function() { $('#rollover-content').slideToggle() }) – adeneo Commented Apr 1, 2016 at 20:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You don't need any jQuery for this. A couple of lines of CSS can already achieve this effect. A transition is set on .box-2 to do the effect.

.box-container {
  background: blue;
  width: 200px;
  height: 400px;
  position: relative;
  overflow: hidden;
}
.box-1 {
  position: absolute;
  background: lightblue;
  width: 200px;
  height: 400px;
  top: 0;
  left: 0;
}
.box-2 {
  position: absolute;
  background: darkblue;
  color: white;
  width: 200px;
  height: 0;
  bottom: 0;
  left: 0;
  transition: height .4s ease-in-out;
}
.box-container:hover .box-2 {
  height: 400px;
}

<div class="box-container">

  <div class="box-1">

    Hello

  </div>

  <div class="box-2">

    New content

  </div>
</div>

</div>

To achieve this you just need to wrap your content in a couple of divs. Firstly an outer div which is the same size as the content slides within it and has overflow: hidden to mask off content outside its bounds. Then another div inside that which holds all the slides to be moved up/down as you hover in and out. Then finally inside that you have your actual content. Here's an example:

<div class="container">
    <div class="slide">
        <div class="content" id="first">
            Content 1
        </div>
        <div class="content" id="second">
            Content 2
        </div>
    </div>
</div>

.container {
    width: 200px;
    height: 150px;
    overflow: hidden;
    position: relative;
}
.slide {
    position: absolute;
}
.content {
    width: 200px;
    height: 150px;
}

$('.container').hover(function(e) {
    var $container = $(this), 
        top = e.type == 'mouseenter' ? -$container.height() : 0;
    $container.find('.slide').stop(true).animate({
        top: top
    })
})

Working example

Alternatively you can do it in CSS alone, so long as the .content elements will always be the height defined in your CSS:

.slide:hover {
    top: -150px;
}

Working example