Question

我正在阅读关于jQuery的scale effect，但我似乎无法让它发挥作用。

我想要做的就是在其中心枢轴点将div缩放到原始大小的90％，并在用户将鼠标悬停时将其不透明度淡化为80％，然后在鼠标离开时将其恢复原状div。

Answer 1

以下是使用css：

进行操作的方法

#yourDiv 
{
  width:20px;
  height:20px;
  opacity:1;
  filter:alpha(opacity=100);
  -webkit-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
#yourDiv:hover
{
  width:30px;
  height:30px;
  opacity:0.8;
  filter:alpha(opacity=80);
}

或者，您可以使用transform功能：

#yourDiv 
{
  width:20px;
  height:20px;
  opacity:1;
  filter:alpha(opacity=100);
  -webkit-transform: scale(1,1);
      -ms-transform: scale(1,1);
          transform: scale(1,1);
  -webkit-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
#yourDiv:hover
{
  -webkit-transform: scale(1.2,1.2);
      -ms-transform: scale(1.2,1.2);
          transform: scale(1.2,1.2);
  opacity:0.8;
  filter:alpha(opacity=80);
}

继承人：https://jsfiddle.net/o3whjz33/5/

更新：正如您所看到的，transform更优雅。但请确保添加浏览器前缀以确保它适用于所有人。

pleeease.io/play - 这个网站可以很好地自动添加前缀。欢呼声。

更新2：可以为各个属性指定`transition属性，而不是全部属性，如下所示：

 transition: opacity 0.5s ease-in-out;
 transition: transform 0.2s ease-in-out;

您可以详细了解transform和transition here以及here

Answer 2

悬停ypu上的不透明度可以使用:hover

#toggle {
width: 100%;
height: 100px;
background: #000;
opacity:1;    
}
#toggle:hover {
opacity:0.8;
}


<div id="toggle"></div>

要减少点击的宽度，您可以使用javascript

$(document).click(function () {
$("#toggle").css({       
    "width": "90%",
    "margin-left":"5%"
});
});

fiddle

改变div围绕其中心枢轴点的比例

2 个答案: