All geek questions in one place

JQuery hide () animation slide to the right

Using the jQuery function hide()with an optional duration parameter, I can get several warning boxes on my site to gracefully slide off the screen and disappear.

It seems that the default direction for the animation to hide is the slide on the left, although this behavior is not defined in the definition page . hide()

I need to be able to make the fields also slide right or up.

Equally important, if this behavior is undefined, I am worried that different browsers may render animations differently. Therefore, I am also looking to fix the sequence.

Where is the slide behavior indicated? What is the easiest way to switch to a slide on the right or up?

$(document).ready(function() {
  $("#close-alert-box-urgent").click(function() {
    $("#alert-box-urgent").hide(1000);
  });
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide('fast');
  });
});
.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-urgent">
  <h1>Tuition Alert</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-urgent">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-news">
  <h1>Latest News</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>
Run codeHide result

https://jsfiddle.net/n0zpev0v/

+4
4

jQueryUI, hide, .

jQueryUI

hide("slide", {direction: "right"}, 1000);

JSFiddle

+5

jQuery .animate(), .

$(document).ready(function() {
  $("#close-alert-box-urgent").click(function() {
    $("#alert-box-urgent").animate({
    'margin-left' : "50%",
    'opacity' : '0',
    },500);
  });
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").animate({
    'margin-top' : "-50%",
    'opacity' : '0'
    },500);;
  });
});
body{
  overflow-x:hidden;
}
.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
  display:block;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="alert-box" id="alert-box-urgent">
  <h1>Tuition Alert</h1>
  <p>text text text text text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-urgent"><img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""></a>
</article>

<article class="alert-box" id="alert-box-news">
  <h1>Latest News</h1>
  <p>text text text text text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news"><img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""></a>
</article>
Hide result
+3

:

, -

"", , . :

Width // Height

, , .

, , float, .

Jsfiddle Demo

+3

animate.css.

fn.extend :

$.fn.extend({
  animateAlert: function(animationName, speed, isForwards) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    this.addClass('animated ' + animationName).css("animation-duration", speed + "ms");
    if (!isForwards) {
      this.one(animationEnd, function() {
        $(this).removeClass('animated ' + animationName);
      });
    }
  }
});

, , animationName, @keyframe CSS.

:

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  100% {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

speed, , isForwards , forwards animation-fill-mode.

CODE SNIPPET:

$.fn.extend({
  animateAlert: function(animationName, speed, isForwards) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    this.addClass('animated ' + animationName).css("animation-duration", speed + "ms");
    if (!isForwards) {
      this.one(animationEnd, function() {
        $(this).removeClass('animated ' + animationName);
      });
    }
  }
});

$(document).ready(function() {
  $("#close-alert-box-urgent").on("click", function() {
    $("#alert-box-urgent").animateAlert('slideOutUp', 6000);
  });
  $("#close-alert-box-news").on("click", function() {
    $("#alert-box-news").animateAlert('slideOutUp', 500, true);
  });
});
.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  100% {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="alert-box" id="alert-box-urgent">
  <h1>Tuition Alert</h1>
  <p>text text text text text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-urgent">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-news">
  <h1>Latest News</h1>
  <p>text text text text text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>
Hide result

jsFiddle

$.fn.extend({
  animateAlert: function(animationName, speed, isForwards) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    this.addClass('animated ' + animationName).css("animation-duration", speed + "ms");
    if (!isForwards) {
      this.one(animationEnd, function() {
        $(this).removeClass('animated ' + animationName);
      });
    }
  }
});

$(document).ready(function() {
  $("#close-alert-box-urgent").on("click", function() {
    $("#alert-box-urgent").animateAlert("rotateOutUpRight", 500, true);
  });
  $("#close-alert-box-news").on("click", function() {
    $("#alert-box-news").animateAlert("zoomOutDown", 500, true);
  });
});
.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  100% {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown
}
@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="alert-box" id="alert-box-urgent">
  <h1>Tuition Alert</h1>
  <p>text text text text text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-urgent">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-news">
  <h1>Latest News</h1>
  <p>text text text text text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>
Hide result

.on() jQuery click(). .

+2
source

Source: https://habr.com/ru/post/1658111/

More articles:


All Articles