Adding a different transition speed to mouse-out with css3 transition

Question

I am making a mouse direction based gallery and i want the transition to be faster on the mouse out but i cant workout how to do it with this code JSfiddle demo. i have got the img and info panels set to different transition styles but i cant get the out styled also?

$(".gallery li").on("mouseenter mouseleave", function (e) {

      var w = $(this).width();
      var h = $(this).height();

      var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
      var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);

      var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

      /** check for direction **/
      switch (direction) {
      case 0:
          // direction top
          var slideFrom = {
              "top": "-100%",
              "right": "0"
          };
          var slideTo = {
              "top": 0
          };
          var imgSlide = "0, 100";

          break;
      case 1:
          // direction right
          var slideFrom = {
              "top": "0",
              "right": "-100%"
          };
          var slideTo = {
              "right": 0
          };
          var imgSlide = "-100, 0";

          break;
      case 2:
          // direction bottom
          var slideFrom = {
              "top": "100%",
              "right": "0"
          };
          var slideTo = {
              "top": 0
          };
          var imgSlide = "0, -100";

          break;
      case 3:
          // direction left
          var slideFrom = {
              "top": "0",
              "right": "100%"
          };
          var slideTo = {
              "right": 0
          };
          var imgSlide = "100, 0";

          break;
      }

      if (e.type === 'mouseenter') {
          var element = $(this);

          element.find(".info").removeClass("transform").css(slideFrom);
          element.find("img").addClass("transform-img").css("transform", "matrix(1, 0, 0, 1," + imgSlide + ")");

          setTimeout(function () {
              element.find(".info").addClass("transform").css(slideTo);
          }, 10);


      } else {
          var element = $(this);

          element.find(".info").addClass("transform").css(slideFrom);
          element.find("img").removeClass("transform-img").css("transform", "matrix(1, 0, 0, 1," + imgSlide + ")");

          setTimeout(function () {
              element.find("img").addClass("transform-img").css("transform", "matrix(1, 0, 0, 1,0,0)");
          }, 10);

      }
  });

Jakub Kotrs · Accepted Answer · 2014-08-21 01:02:00Z

2

In CSS, you could define different transition durations using :hover

.transform { /* mouseleave */
    transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
li:hover .transform { /* mouseenter */
    transition-duration: 400ms;
}

With prefixes, of course.

answered Aug 21, 2014 at 1:02

Jakub Kotrs

6,2841 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Timothy Over a year ago

Thanks that works great, i added it to both the image and info panel jsfiddle.net/unknown601/wL6rLsmq/10

Collectives™ on Stack Overflow

Adding a different transition speed to mouse-out with css3 transition

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related