Is there a way to make a div come to life with animation when it's clicked, and then make it go back to its original

Question

Is there a way to make a div come to life with animation when it's clicked, and then make it go back to its original

I've been dedicating several hours to finding a solution, but nothing has worked so far.

My goal is to set up an animation where the user clicks on a square image, causing it to 'flip' into a trapeze shape similar to the new Windows logo. At the same time, another div will slide out to the right from behind this element, displaying information related to the image.

While I have created a working example on my website, it currently only functions in webkit browsers due to the lack of vendor prefixes and the div behind not sliding out correctly yet. However, the concept is clear - something akin to the Windows 8 start screen tiles.

The animation I am using is flipInY from animate.css with the removal of the middle keyframes. Originally, I planned to use Hover to trigger the animation, but implementing this on a mobile site would be challenging. Therefore, I opted for a jQuery 'onClick' event as a better alternative.

Although I have successfully implemented the onClick switchClass JQuery function for the first animation, the second click merely restarts the animation rather than reversing it. I had the code here, but I removed it in search of a more effective solution that remains elusive.

This question and answer provide some insight into the issue, although it pertains to a different 'slideUp' animation and involves two separate buttons. I prefer to have a single button that toggles the effect.

Any assistance would be greatly appreciated, and if you believe I am approaching this task in the wrong manner, please feel free to suggest an alternate approach!

jquery html jquery-ui css

Answer 1

Answer №1

Have you experimented with this:

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Works in Safari and Chrome */

These effects are really cool, by the way :)

Answer 2

Have you experimented with this:

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Works in Safari and Chrome */

These effects are really cool, by the way :)

Answer 3

Answer №2

In my opinion, the best choice would be to implement jQuery's toggleClass();

Answer 4

In my opinion, the best choice would be to implement jQuery's toggleClass();

Answer 5

Answer №3

Do you think this could be a solution for your needs?

$('#rectangle').click(function() {
  $(this).toggle(
      function(){
        $(this).flippy({
            color_target: "#aa0621",
            direction: "right",
            duration: "750"
         });
      },
      function(){
        $(this).flippy({
            color_target: "#aa0621",
            direction: "left",
            duration: "750"
         });
      }
  );
});

Here is a demonstration of the code in action: http://jsfiddle.net/H6wA3/5/

Answer 6

Do you think this could be a solution for your needs?

$('#rectangle').click(function() {
  $(this).toggle(
      function(){
        $(this).flippy({
            color_target: "#aa0621",
            direction: "right",
            duration: "750"
         });
      },
      function(){
        $(this).flippy({
            color_target: "#aa0621",
            direction: "left",
            duration: "750"
         });
      }
  );
});

Here is a demonstration of the code in action: http://jsfiddle.net/H6wA3/5/

Answer 7

Answer №4

Perhaps I may not be fully grasping your point, but take a look at this LIVE DEMO

Here is the HTML code:

<div class="wrap">
<div class="over">yellow</div>
<div class="box">red</div>
</div>

And the JavaScript code:

$('.over').click(function() {
$('.box').animate({marginLeft: '150',
                   width: '120',
                   height: '120',
                   marginTop: '-10'
                  }, 300);  


setTimeout( function(){
    $('.box').css('zIndex',80);
} , 400); 

$('.box').animate({marginLeft: '0'}, 300).animate({width: '100', height: '100', marginTop: '0'}, 300);
});

$('.box').click(function() {
$('.over').animate({
                    marginLeft: '150',
                    width: '120',
                    height: '120',
                    marginTop: '-10'
                    }, 300).css('zIndex',5); 

$('.box').css('zIndex',10);
setTimeout( function(){
    $('.over').css('zIndex',70);   
} , 400); 
$('.over').animate({
    marginLeft: '0'}, 300)
    .animate({width: '100',
          height: '100',
          marginTop: '0'}, 300);

});

Answer 8

Perhaps I may not be fully grasping your point, but take a look at this LIVE DEMO

Here is the HTML code:

<div class="wrap">
<div class="over">yellow</div>
<div class="box">red</div>
</div>

And the JavaScript code:

$('.over').click(function() {
$('.box').animate({marginLeft: '150',
                   width: '120',
                   height: '120',
                   marginTop: '-10'
                  }, 300);  


setTimeout( function(){
    $('.box').css('zIndex',80);
} , 400); 

$('.box').animate({marginLeft: '0'}, 300).animate({width: '100', height: '100', marginTop: '0'}, 300);
});

$('.box').click(function() {
$('.over').animate({
                    marginLeft: '150',
                    width: '120',
                    height: '120',
                    marginTop: '-10'
                    }, 300).css('zIndex',5); 

$('.box').css('zIndex',10);
setTimeout( function(){
    $('.over').css('zIndex',70);   
} , 400); 
$('.over').animate({
    marginLeft: '0'}, 300)
    .animate({width: '100',
          height: '100',
          marginTop: '0'}, 300);

});

Is there a way to make a div come to life with animation when it's clicked, and then make it go back to its original

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

<div class="firstHeaderClass"> What exactly is this?

Executing a server-side Java function from client-side JavaScript or jQuery on a JSP page

Troubleshooting problem with Angular ngx-bootstrap datepicker positioning on mobile devices

Can jQuery Autocomplete function without stopping at white spaces?

Enhancing Alerts in Bootstrap 5.1+: Tweaking Text, Background, and Border Colors for Alert-Warning Messages using custom _variables.scss

Ajax causing submission of 'undefined' data

Step-by-step guide on generating a fluid list with Express and HTML

Using jQuery.post to select and manipulate the target div displaying Google search results

"Troublesome issue with Bootstrap push and pull functionality not functioning correctly

What is the best way to reduce the size of an image taken from an image sprite rather than a standalone image?

Issues are arising with the .mouseover functionality within this particular code snippet

Tricks for disabling _blank behavior in jquery?

Repeating the execution of Asp.net MVC ajax once again

Interactive Communication: PHP and JQuery Messaging Platform

What methods can I employ to utilize a JSON response generated by PHP within jQuery?

Customizing TableRow Hover Effects in React with Material-UI

Adaptive grids in Bootstrap

The importance of adding blank spaces in email formatting

Using jQuery.dataTables to choose all rows except the final column

Utilizing jQuery functions within Vue components in Quasar Framework