Question

我试图在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秒后立即显示。

有人可以帮我吗？
非常感谢你。
的修改
我不知道发生了什么，但它现在正在运作。我没有改变一件事。奇怪......
但现在，当我点击某些东西时，它会变成高亮的蓝色，这对图像来说并不是很好。有人能帮助我吗？

Answer 1

您无需检查高度即可添加或删除课程。只需切换课程

$("#saber").bind( "click", function () {
    $("#blade").toggleClass("blade-closed"); 
 });

您需要添加打开的课程以增加身高。

$("#saber").bind( "click",
  function () 
  {
  if ($("#blade").height() > 0)
   {
  $("#blade").removeClass("blade-opened");
  $("#blade").addClass("blade-closed"); 
 }
  else
   {
    $("#blade").removeClass("blade-closed");
    $("#blade").addClass("blade-opened");        
   }    
 });

PhoneGap中只有一个CSS过渡

1 个答案: