Question

我有一个图片库，用户点击一个小缩略图图像，这个图像显示为一个更大的版本＆＃34; Polaroid img＆＃34;在我的情况下。我想要做的是向大图像添加动画，以便每次在那里显示新图像时，其不透明度从0变为1。

我无法在我的JavaScript中弄清楚为什么这个课程没有被添加和删除。

由于

HTML代码

<div class="container">
  <h1>Meet some of the Characters</h1>
  <div class="boxContainer">
    <div class="Polaroid">
      <img src="images/imgage1.jpg" id="LargeImage">
      <div class="PolaroidText" id="LargeImageText">Image 1</div>
    </div>
  </div>

  <div class="row">
    <div class="column"><img src="images/imgage1.jpg" alt="Image 1" onclick="ClickImage(this)"></div>
    <div class="column"><img src="images/imgage2.jpg" alt="Image 2" onclick="ClickImage(this)"></div>
    <div class="column"><img src="images/imgage3.jpg" alt="Image 3" onclick="ClickImage(this)"></div>
    <div class="column"><img src="images/imgage4.jpg" alt="Image 4" onclick="ClickImage(this)"></div>
    <div class="column"><img src="images/imgage5.jpg" alt="Image 5" onclick="ClickImage(this)"></div>
    <div class="column"><img src="images/imgage6.jpg" alt="Image 6" onclick="ClickImage(this)"></div>
    <div class="column"><img src="images/imgage7.jpg" alt="Image 7" onclick="ClickImage(this)"></div>
  </div>
</div>

CSS代码

.boxContainer
{
  max-width: 600px;
  height: auto;
  margin: auto;
  padding: 20px;
}
.Polaroid
{ 
  width: 100%;
  height: auto
  max-width: 2058px;
    transform: rotate(2deg); 
    margin-top: 50px; 
    margin-bottom: 50px; 
    box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 10px;
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    padding: 20px;
}
.Polaroid img
{
  opacity: 0px;
  max-width: 100%;
  height: auto;
  border: 2px solid #949baa;
  transition: opacity 2s ease !important;
}

.PolaroidText
{
  color: black;
  font-size: 28px;
  text-align: center;
  margin: auto;
  padding: 10px;
  text-decoration: underline;
}
.column {
    float: left;
    width: 14%;
    padding: 5px;
    display: table;
    margin: auto;

}

/* Style the images inside the grid */
.column img {
  width: 100%;
  height: auto;
  opacity: 0.8; 
  cursor: pointer; 
  border-radius: 5px;
  z-index: 1;
  transform: rotate(2deg); 
  transition-duration: .3s;
}

.column img:hover {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: rgba(0, 0, 0, 0.6) 5px 5px 5px;
    z-index: 9999;

}
.PoloaroidAnim
{
   animation-name: FadeImage;
  -webkit-animation-name FadeImage;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes FadeImage
{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

JavaScript代码

function ClickImage(smallimg)
{
   var lgImage = document.getElementById("LargeImage");
   var lgImageText = document.getElementById("LargeImageText");

   lgImage.addClass("PoloaroidAnim").one("webkitAnimationEnd", 
   remove(lgImage));
   lgImage.src = smallimg.src;

   lgImageText.innerHTML = smallimg.alt;
}
function remove(img)
{
  img.removeClass("PoloaroidAnim");
}

Answer 1

如果你使用普通的JS，那么addClass函数不存在，所以你应该像这样添加类：

var lgImage = document.getElementById("LargeImage");
lgImage.className += " PolaroidAnim";

您正在使用的其他函数（removeClass，one）也是如此 - 它们来自jQuery库。

如果您使用jQuery，那么您应该选择这样的元素：var lgImage = $("#LargeImage");而不是getElementById，因为它不是jQuery对象，然后addClass函数未定义。< / p>

通过OnClick事件向图像添加动画

1 个答案: