JQUERY-CONFIRM

Animations - Use one, or define your own.

back to Main Docs

Open/Close Animations

Impression lies in what we see.
Different animations can be set for open and close events.

2D animations:

3D animations:

You can also create/define your own animations

  1. $.confirm({
  2. animation: 'zoom',
  3. closeAnimation: 'scale'
  4. });
  5. // Available animations:
  6. // right, left, bottom, top, rotate, none, opacity, scale, zoom,
  7. // scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)

Animation bounce

Some eye candy thats in fashion.

  1. $.confirm({
  2. animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
  3. });

Animation speed

Adjust the duration of animation.

  1. $.confirm({
  2. animationSpeed: 2000 // 2 seconds
  3. });
  4. $.confirm({
  5. animationSpeed: 200 // 0.2 seconds
  6. });

Define your custom animations

Defining your custom animations lets you match your existing user interface.

Example for a newsflash animation.
These animations are define the starting point of the openAnimation and ending point of the closeAnimation

  1. .jconfirm .jconfirm-box.jconfirm-animation-news{
  2. // the animation name is bob
  3. transform: rotate(400deg) scale(0);
  4. }
  1. $.confirm({
  2. animation: 'news',
  3. closeAnimation: 'news',
  4. });

The animation name should be lowercase, or they wont work.

  • .jconfirm-animation-animation-name translates to 'animation-name'
  • .jconfirm-animation-animationhere translates to 'animationhere'

Background dismiss animation

This animation takes place when backgroundDismiss is false, or returns a falsy value.

Example for a newsflash animation.
These animations are define the starting point of the openAnimation and ending point of the closeAnimation

  1. .jconfirm .jconfirm-box.hilight.jconfirm-hilight-random {
  2. /*the animation name is bob*/
  3. transform: translate3d(0,0,0);
  4. animation: random 2s;
  5. }
  6. @keyframes random{
  7. 10%, 90% {
  8. transform: rotate(-2deg);
  9. }
  10. 20%, 80% {
  11. transform: rotate(4deg);
  12. }
  13. 30%, 50%, 70% {
  14. transform: rotate(-8deg);
  15. }
  16. 40%, 60% {
  17. transform: rotate(8deg);
  18. }
  19. }
  1. $.confirm({
  2. backgroundDismissAnimation: 'random',
  3. });

The animation name should be lowercase, or they wont work.