Question

我正在制作一个基于鼠标方向的图库，我希望鼠标移出的速度更快，但是我无法使用此代码JSfiddle demo来锻炼。我已经将img和info面板设置为不同的过渡样式，但我也不能得到外观样式？

$(".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);

      }
  });

Answer 1

在CSS中，您可以使用以下命令定义不同的转换持续时间：hover

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

当然还有前缀。

使用css3转换为鼠标移出添加不同的转换速度

1 个答案: