jquery - 图像上的 CSS 过渡不起作用

Question

在我网站的顶部，我有一个画廊，当您向下滚动页面时，我希望画廊以较小的版本显示。

大版本:

小版本:

我用 jQuery 做了这个，当你滚动 300 像素(画廊初始高度)时，你会得到大约 100 像素高度的小的。

我已经设置了一些转换:

初始:

#gallery {
  overflow: hidden;
  width: 100%;
  height: 305px;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
  background-color:white;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
#gallery img {
  height: 300px;
  width: auto;
  padding: 2px;
  vertical-align: middle;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

滚动:

#fixed_gallery {
  overflow: hidden !important;
  width: 100% !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  display: inline-block !important;
  position: fixed !important;
  z-index: 53 !important;
  height: 100px !important;
  background-color:white;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

#fixed_gallery img {
  height: 95px !important;
  width: auto !important;
  padding: 2px !important;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

我有相同的导航箭头代码，它们确实随着过渡缩放。我有点迷失了这个:\!

如何让这种转变发挥作用？因此，当画廊变成小版本时，我希望图像变小并有一个很好的过渡。

引用网址:http://ehad.mediaheads.nl/blog/ & http://jsfiddle.net/fzjqyhcw/

Answer 1

图像上的 css 转换不起作用，因为您实际上并未调整图像的大小。

尝试添加一个类(而不是切换父类的 ID)以便您可以执行如下操作:

#gallery {
   ...
   position: relative;
}

#gallery img {
   ...
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

#gallery.fixed-gallery {
   ....
   position: fixed;
}

#gallery.fixed-gallery img {
   ....
   height: 95px;
}