我正在尝试在PhoneGap中更改点击图片的大小。我有这样的代码：
HTML
<div id="saber"><div id="handle"><img src="imgs/handle.png"></div>
<div id="blade" class="blade-opened"><img src="imgs/blade-blue.png"></div></div>
的JavaScript
$("#saber").bind( "click",
function ()
{
if ($("#blade").height() > 0)
{
$("#blade").addClass("blade-closed");
}
else
{
$("#blade").removeClass("blade-closed");
}
}
);
的CSS
#blade
{
text-align: center;
left: 0;
right: 0;
display: inline-block;
position: fixed;
z-index: 1;
}
.blade-opened
{
bottom: 5%;
height: 81.25%;
-webkit-transition: all 1s;
}
.blade-closed
{
bottom: 29%;
height: 0;
}
#blade img
{
height: 100%;
}
但是，当我在手机上打开它时，图像会随着过渡而缩小，但是当我再次单击时，它会在1秒后立即出现。
谁能帮我吗？
非常感谢你。
编辑
我不知道发生了什么，但现在可以正常工作。我没有改变任何事情。奇怪...
但是现在当我单击某物时，它会变成蓝色高亮，这在图像上不是很好。有人能帮我吗？
@Kuxa，
改变：
-webkit-transition: all 1s;
到：
-webkit-transition: height 1s;
FWIW：这也将起作用：
transition: height 1s;
您还需要设置position，如下所示：
position:relative;
我找不到很好的文档来解释这一点。
UPDATE我应该补充，使用时的位置，可以使用任何值，除了“初始”状态-这是static
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句