Using jQuery to animate a div when clicked by the mouse

Question

Using jQuery to animate a div when clicked by the mouse

Here's the scenario: I have 3 block elements arranged in a specific order:

Image
Hidden Text Block (.hidden)
Footer Block (.blockimage)

When the page loads, the image is displayed over the hidden text block (which contains further information), followed by a small header block. When the .blockimage is clicked, I want the .hidden block to slide above the image.

Currently, the .hidden element has been set to position:absolute and has inline style display:none. If I inspect the .hidden element and uncheck display:none, it appears as expected. However, I am having trouble animating it on a click event.

This is what I have attempted so far:

$('.blockimage').click(function() {
  $('.blockimage .hidden').slideUp('fast', function() {
    // code to remove display:none from inline CSS of .hidden and slide content up (the class already exists)
  });
});

Without considering rotation, the slide-up effect should be similar to this example: http://css-tricks.com/examples/SlideupBoxes/

Any assistance would be greatly appreciated :)

jquery css

Answer 1

Answer №1

One effective method is to create a parent div element that contains both the image and the information, set to have overflow: hidden, and then animate its position upon clicking. You can view a live demonstration here.

HTML

<div class="container">
    <img src="{yourimage}" />
    <div class="info-block">
     {information}
    </div>
</div>

CSS

Below is the essential CSS needed for this functionality.

.container {

  position: relative;
  overflow: hidden;

}

.info-block {

  position: absolute;
  bottom: -xx; // adjust as per your element height

}

Javascript

jQuery(document).ready(function(){

  $('img').click(function(){

    $(this).siblings('.info-block').animate({
      bottom: '0'}, 'fast');

  });

});

Update: Revert to Original State (using jQuery or CSS3 Transition)

If you wish for it to return to its initial state, you can enhance the provided code by having your JavaScript check the current bottom property like this:

if( $(this).siblings('.info-block').css('bottom') !== '0px' )
    $(this).siblings('.info-block').animate({bottom: 0}, 'fast');
else
    $(this).siblings('.info-block').animate({bottom: '-{some-other-height}'}, 'fast');

You can see a functioning example here.

In such cases, using a CSS3 transition might be preferable for cleaner and more efficient code. Even if you do not require it to revert back, transitioning can still be useful. In those instances, I found jQuery to be quicker.

Solution 2: Implementing CSS3 Transitions

To utilize CSS3 Transition, define an additional class as follows:

.info-block.shown {

    bottom: 0;

}

Then, simply toggle this class using jQuery on click events:

$('img').click(function(){

      $(this).siblings('.info-block').toggleClass('shown');

});

See a functional demo here.

Answer 2

One effective method is to create a parent div element that contains both the image and the information, set to have overflow: hidden, and then animate its position upon clicking. You can view a live demonstration here.

HTML

<div class="container">
    <img src="{yourimage}" />
    <div class="info-block">
     {information}
    </div>
</div>

CSS

Below is the essential CSS needed for this functionality.

.container {

  position: relative;
  overflow: hidden;

}

.info-block {

  position: absolute;
  bottom: -xx; // adjust as per your element height

}

Javascript

jQuery(document).ready(function(){

  $('img').click(function(){

    $(this).siblings('.info-block').animate({
      bottom: '0'}, 'fast');

  });

});

Update: Revert to Original State (using jQuery or CSS3 Transition)

If you wish for it to return to its initial state, you can enhance the provided code by having your JavaScript check the current bottom property like this:

if( $(this).siblings('.info-block').css('bottom') !== '0px' )
    $(this).siblings('.info-block').animate({bottom: 0}, 'fast');
else
    $(this).siblings('.info-block').animate({bottom: '-{some-other-height}'}, 'fast');

You can see a functioning example here.

In such cases, using a CSS3 transition might be preferable for cleaner and more efficient code. Even if you do not require it to revert back, transitioning can still be useful. In those instances, I found jQuery to be quicker.

Solution 2: Implementing CSS3 Transitions

To utilize CSS3 Transition, define an additional class as follows:

.info-block.shown {

    bottom: 0;

}

Then, simply toggle this class using jQuery on click events:

$('img').click(function(){

      $(this).siblings('.info-block').toggleClass('shown');

});

See a functional demo here.

Answer 3

Answer №2

Instead of targeting all elements with both classes, you can try using $('.hidden').slideUp.

Another option is to use show instead of slideUp for displaying the selected elements. You can find more information about slideUp here.

Answer 4

Instead of targeting all elements with both classes, you can try using $('.hidden').slideUp.

Another option is to use show instead of slideUp for displaying the selected elements. You can find more information about slideUp here.

Using jQuery to animate a div when clicked by the mouse

Answer №1

HTML

CSS

Javascript

Update: Revert to Original State (using jQuery or CSS3 Transition)

Solution 2: Implementing CSS3 Transitions

Answer №2

Similar questions

Utilizing AJAX to dynamically update a div's content by extracting a specific div from the retrieved data

Disappearing Into the Background Excluding Specific Divs

The sliding effect in react-owl-carousel seems to be malfunctioning once new data is dynamically incorporated into the carousel

Reveal the concealed button with a jQuery click event

Removing scrollbar from table in React using Material UI

Flyer - Chart "dimmed" and unselectable when dimensions are specified as a proportion

Detecting collisions on a tile map using only JavaScript

Attempting to utilize Ajax to save a file in Laravel, however unsure of what may be causing the issue in my code

Is there a way to increase the total of each row by two when a button is clicked?

Does CSS padding-top: 100% take into account the parent's width?

Is there a way to identify whether the image file is present in my specific situation?

Discovering parent elements far up the DOM hierarchy using jQuery

Updating the Animation for Datepicker Closure

Using Props with jQuery in React Components: A Comprehensive Guide

Creating a notification system similar to Facebook's in an HTML button using just HTML and CSS

Guide to generating a text string by utilizing the foreach loop

What is the best way to make Bootstrap 3 move to a new line when there is not enough space?

Adjust the ZIndex on a div through interactive clicking

Assistance needed with updating a related element using jQuery AJAX upon successfully completing a

Executing a final PHP script termination with die(), along with Jquery AJAX