Swap the text inside a div with new content by smoothly sliding it upwards with jQuery

Question

Swap the text inside a div with new content by smoothly sliding it upwards with jQuery

Currently, I have 2 divs set up like this:

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

I am trying to achieve a 'slide up' transition effect on the #rollover-content div when the mouse hovers over the #content div. And when the mouse leaves the #content div, I want the #rollover-content div to slide back down.

If you visit this demo and hover over the first tile, you will see the desired effect. However, I would like to implement it using pure jQuery.

In order to create a visually appealing card design, I have created the following CSS class:

.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 apply these transitions within a div that has this wrapping card class?

javascript jquery html css

Answer 1

Answer №1

No need for jQuery here - just a few lines of CSS can achieve the same effect. The transition effect is applied to the .box-2 class.

.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>

Answer 2

No need for jQuery here - just a few lines of CSS can achieve the same effect. The transition effect is applied to the .box-2 class.

.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>

Answer 3

Answer №2

If you want to achieve this effect, simply enclose your content within two divs. Firstly, include an outer div that matches the size of the content slides and has overflow: hidden to hide any content outside its boundaries. Then, add another div inside that which contains all the slides to be moved up or down when hovering. Lastly, place your actual content within that innermost div. Here's a basic 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
    })
})

See it in action here

Alternatively, you can achieve this solely with CSS as long as the .content elements will always be the specified height from your CSS:

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

Here's another working example

Answer 4

If you want to achieve this effect, simply enclose your content within two divs. Firstly, include an outer div that matches the size of the content slides and has overflow: hidden to hide any content outside its boundaries. Then, add another div inside that which contains all the slides to be moved up or down when hovering. Lastly, place your actual content within that innermost div. Here's a basic 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
    })
})

See it in action here

Alternatively, you can achieve this solely with CSS as long as the .content elements will always be the specified height from your CSS:

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

Here's another working example

Swap the text inside a div with new content by smoothly sliding it upwards with jQuery

Answer №1

Answer №2

Similar questions

Navigating through multiple pages with React Native stack navigation

Image not showing correctly after closing the bootstrap modal

An issue arises in Django where a particular field fails to display the accurate value when presented in a template

The input text in the Typeahead field does not reset even after calling this.setState

Deleting a node from a jstree based on its ID upon clicking a button

The TypeScript compilation failed for the Next.js module

Turn off hover effect for MUI DataGrid

Tips for adjusting the maximum height of the column panel within the DataGrid element

The final row of the jQuery Autocomplete list is concealed inside the div element

Extracting the toArray value from the sortable() function

Struggling with NodeJs POST request issue

Using nested asynchronous loops to push items to an asynchronous queue without triggering the main callback

Steps for creating a horizontal card design

Express callback delaying with setTimeout

Require guidance and resolution

Asynchronous Middleware in ExpressJS Routing

Tips for dynamically loading content in a jQueryUI dialog box

How can I include JavaScript files in Maya or 3DS Max?

Unable to save captured signature image during saveEvent function in React Native

The D3 path is generating an unexpected output of 0px by 0px, causing the map not to display properly. I am currently unsure how to adjust the projection to