Shifting a div from side to side

Question

Shifting a div from side to side

I don't have much experience with coding, so I was hoping for some assistance.

My goal was to create a div that moves back and forth using toggleClass;

$('div').on('click', function() {
    $(this).toggleClass('active');
});

as well as keyframes;

.active {
    animation-name: moveme;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes moveme {
    0%  {transform: translate(0,0)}
    50%  {transform: translate(-200px, 0px)}
    100%  {transform: translate(-200px,-50px);}
}

However, when the div returns to its original position, it does not animate. I would like the div to animate in reverse with the same animation. Is there a way to achieve this?

You can view what I'm attempting to do here jsfiddle.net/jmrMW/43/ The example is simple now, but it will become more complex in the future.

Thank you kindly for your help! ^^

javascript css animation

Answer 1

Answer №1

When it comes to manipulating classes in Javascript, the effects can be instant. However, if your CSS animations are only bound to the .active class, clicking a second time can cause you to lose that class and therefore lose the animation effect.

Instead of duplicating code like others have suggested, let's think like true programmers and utilize the power of CSS3 animations. Why not try a different approach by setting animation-direction: alternate and animation-play-state: paused, then defining a CSS class for movement:

.moving {
  animation-play-state: running;
}

Next, apply this class to the element for just 1 second after it has been clicked:

var $moveable = $( '.moveable' ).eq( 0 );

$moveable.click(function() {
    $moveable.addClass( 'moving' );
    setTimeout(function() {
         $moveable.removeClass( 'moving' );
    }, 1000);
});

Take a look at this fiddle for a demo.

Update

This solution does have a drawback - using timers in both JS and CSS may not sync perfectly. The animation becomes infinite, going slightly further each cycle. To fix this, we can increment animation-iteration-count to prevent it from proceeding to the next cycle. Still fun experimenting though!

Check out this updated fiddle for more details.

Answer 2

When it comes to manipulating classes in Javascript, the effects can be instant. However, if your CSS animations are only bound to the .active class, clicking a second time can cause you to lose that class and therefore lose the animation effect.

Instead of duplicating code like others have suggested, let's think like true programmers and utilize the power of CSS3 animations. Why not try a different approach by setting animation-direction: alternate and animation-play-state: paused, then defining a CSS class for movement:

.moving {
  animation-play-state: running;
}

Next, apply this class to the element for just 1 second after it has been clicked:

var $moveable = $( '.moveable' ).eq( 0 );

$moveable.click(function() {
    $moveable.addClass( 'moving' );
    setTimeout(function() {
         $moveable.removeClass( 'moving' );
    }, 1000);
});

Take a look at this fiddle for a demo.

Update

This solution does have a drawback - using timers in both JS and CSS may not sync perfectly. The animation becomes infinite, going slightly further each cycle. To fix this, we can increment animation-iteration-count to prevent it from proceeding to the next cycle. Still fun experimenting though!

Check out this updated fiddle for more details.

Answer 3

Answer №2

I have created a modified version of your JSFiddle code. I essentially replicated the keyframes you already had but implemented them in reverse for a different effect. Feel free to check it out!

$('div').on('click', function() {
  if ( $(this).hasClass("go-up") ) {
    $(this).removeClass("go-up").addClass("go-down");
  } else {
    $(this).addClass("go-up").removeClass("go-down');
  }
});

div{
  background:#aaa;
  width: 200px;
  margin: 20vh auto;
  height: 200px;
}
.go-up {
  animation-name: moveup;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.go-down {
  animation-name: movedown;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

@keyframes moveup {
  0%  {transform: translate(0,0)}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(-100px,-50px);}
}

@keyframes movedown {
  0%  {transform: translate(-100px,-50px);}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(0,0)}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div></div>

Check out the modified version here.

Answer 4

I have created a modified version of your JSFiddle code. I essentially replicated the keyframes you already had but implemented them in reverse for a different effect. Feel free to check it out!

$('div').on('click', function() {
  if ( $(this).hasClass("go-up") ) {
    $(this).removeClass("go-up").addClass("go-down");
  } else {
    $(this).addClass("go-up").removeClass("go-down');
  }
});

div{
  background:#aaa;
  width: 200px;
  margin: 20vh auto;
  height: 200px;
}
.go-up {
  animation-name: moveup;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.go-down {
  animation-name: movedown;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

@keyframes moveup {
  0%  {transform: translate(0,0)}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(-100px,-50px);}
}

@keyframes movedown {
  0%  {transform: translate(-100px,-50px);}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(0,0)}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div></div>

Check out the modified version here.

Shifting a div from side to side

Answer №1

Answer №2

Similar questions

When using Vue.js, binding may not function properly if it is updated using jQuery

Effective ways to transfer data between services and controllers

Having trouble getting the dropdown button to function properly in my Bootstrap navigation bar implementation

Click the button to access the login form created using React components

Firefox 3.5: The Notorious Code Copycat

JQuery fails to remove the "display:hidden" attribute

Sending data through AJAX

Adaptive web layout (Adjusting design based on screen size)

Verify the presence of plain ASCII text

What causes my useEffect hook to trigger twice in React?

Create a single line of content for a carousel display

What is the best way to delete a nested document within an array in MongoDB by referencing its _id?

The CSS file is not displaying the background image on the PHP file

What is the process for accessing and modifying cookies in a local file:/// HTML document?

Tips for inserting HTML-tagged data into a database using AJAX and PHP

What could be the reason for data-id coming back as undefined?

"Enhancing User Experience with AngularJS by Dynamically Modifying and Refresh

Retrieve various elements using a loop and dynamic identifiers (perhaps within a multi-dimensional array)

Having Trouble with Imported JavaScript File in Astro

Animation for Images in Angular v1.2