使用jQuery在悬停时动态更改img的大小会更改imgs的位置

Question

我有一个简单的空HTML div：

<div id="spaceTrainingImages"></div>

我正在动态添加图片：

// adds the images to the img div
imgContainerSpace = $("#spaceTrainingImages");
for (var i = 1; i <= numStimuli; i++) {
  imgContainerSpace.append(
    $("<img>", {
      id: "spaceTrainingImg" + i,
      src: numToPath(i),
      style: "width:30px;height:40px",
      "class": "spaceTrainingPic"
    })
  );
};

此外，当鼠标悬停在每个img上时，我会改变每个img的尺寸。

// deals with size change on mouse over
$(".spaceTrainingPic").hover(function() {
  // img gets three times bigger
  $(this).css({
    "width": "90px",
    "height": "120px",
  });
}, function() {
  // img returns to original size
  $(this).css({
    "width": "30px",
    "height": "40px",
  });
});

我希望imgs位于div的中心并保持在那里：

#spaceTrainingImages {
  position: relative;
  height: 120px;
  background-color: snow;
}

.spaceTrainingPic {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

只要鼠标悬停在任何图像上，此功能就可以使用。但是，每当我将鼠标悬停在图像上时，所有其他图像都会移动。它们的顶部变成了悬停的图像的底部（变得更大）。

我不确定是什么原因引起的。

---

编辑：我忘记提到我确实希望当图像上的悬停变大时，imgs移动到两侧，我只是不希望它们垂直移动。

Answer 1

您可以使用transform scale（）而不是更改高度和宽度值。

我看到你正在改变值30到90和40到120这是原始值的3倍所以使用transform: scale(3);

$(".spaceTrainingPic").hover(
  function() {
    // img gets three times bigger
    $(this).css({
      "transform": "scale(3) translateY(-50%)"
    });
  },
  function() {
    // img returns to original size
    $(this).css({
      "transform": "scale(1) translateY(-50%)"
    });
  });

$(document).ready(function() {
  imgContainerSpace = $("#spaceTrainingImages");
  for (var i = 1; i <= 5; i++) {
    imgContainerSpace.append(
      $("<img>", {
        id: "spaceTrainingImg" + i,
        src: 'https://www.jquery-az.com/html/images/banana.jpg',
        style: "width:30px;height:40px",
        "class": "spaceTrainingPic"
      })
    );
  };
  $(".spaceTrainingPic").hover(function() {
    $(this).css({
      "transform": "scale(3) translateY(-16.666667%)",
      "z-index": "1"
    });
    $(this).next("img").css({
      "margin-left": "30px",
    });
  }, function() {
    $(this).css({
      "transform": "scale(1) translateY(-50%)"
    });
    $(this).next("img").css({
      "margin-left": "0px",
    });
  });
});

#spaceTrainingImages {
  position: relative;
  height: 120px;
  background-color: snow;
}

.spaceTrainingPic {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: all .3s ease;
}

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

Answer 2

没有那么多的javascript和纯粹的CSS，这可以很简单地完成。首先，当你foreach创建div和内部附加图像。

这个div可以有类img-wrapper

.img-wrapper {
  width: 30px;
  height: 40px;
  overflow:hidden;
}

    .img-wrapper img {
       width: 100%;
       height: auto;
       transition: all 0.3s linear;
    }

    .img-wrapper:hover img {
        transform: scale(1.2);
    }

所以基本上你需要这样的东西

<div id="spaceTrainingImages">
   <div class="img-wrapper">
      your img here
   </div>
   <div class="img-wrapper">
      your img here
   </div>
   <div class="img-wrapper">
      your img here
   </div>
</div>

Answer 3

CSS中有一个转换属性，它有助于放置元素内容而不会打扰其他内容。看看下面

$(document).ready(function() {

  // adds the images to the img div
  imgContainerSpace = $("#spaceTrainingImages");
  for (var i = 1; i <= 5; i++) {
    imgContainerSpace.append(
      $("<img>", {
        id: "spaceTrainingImg" + i,
        src: 'https://www.jquery-az.com/html/images/banana.jpg',
        style: "width:30px;height:40px",
        "class": "spaceTrainingPic"
      })
    );
  };

  // deals with size change on mouse over
  $(".spaceTrainingPic").hover(
    function() {
      // img gets three times bigger
      $(this).css({
        "transform": "scale(3)",
        "z-index":"1"
      });
    },
    function() {
      // img returns to original size
      $(this).css({
        "transform": "scale(1)"
      });
    });




})

#spaceTrainingImages {
  position: relative;
  height: 120px;
  background-color: snow;
}

.spaceTrainingPic {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

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

希望这可以帮助

Answer 4

我认为你最好使用transform css属性。

$(".spaceTrainingPic").hover(
  function () {
      // img gets three times bigger
      $(this).css({
        "transform": "scale(3)"
      });
  }, function () {
      // img returns to original size
      $(this).css({
        "transform": "scale(1)"
      });
});

---

你也可以用纯css做到这一点

.spaceTrainingPic:hover {
  transform: scale(3);
}