Question

我正在使用iPhone模拟器，但是我在使用按钮触发动画方面遇到了问题。

＆＃13;

<html>
<head>
<script src="jquery-1.12.0.min.js">
$(function() {
	$("#divhomebttn").click(function() {
		$(".box").toggleClass("box-change");
	});
});
</script>
<style type="text/css">
#divoff {
	position: absolute;
	top:-2px;
	left:160px;
	background-color: #dddddd;
	width: 30px;
	height: 2px;
	border-radius: 1px 1px 0px 0px;
}

#divsilent {
	position: absolute;
	top:44px;
	left:-2px;
	background-color: #dddddd;
	width: 2px;
	height: 20px;
	border-radius: 1px 0px 0px 1px;
}

#divplus {
	position: absolute;
	top:79px;
	left:-2px;
	background-color: #dddddd;
	width: 2px;
	height: 15px;
	border-radius: 2px 0px 0px 2px;
}

#divminus {
	position: absolute;
	top:112px;
	left:-2px;
	background-color: #dddddd;
	width: 2px;
	height: 15px;
	border-radius: 2px 0px 0px 2px;
}

#divcase {
	position: relative;
	top:0px;
	left:10px;
	width: 232px;
	height: 460px;
	background-color: #eeeeee;
	border: 0px solid #ffffff;
	border-radius: 32px;
}

#divsensor {
	position: absolute;
	top:16px;
	left:106px;
	width: 20px;
	height: 2px;
	background-color: #000000;
	border: 1px solid #000000;
	border-radius: 20px;
}

#divspeaker {
	position: absolute;
	top:36px;
	left:97px;
	width: 38px;
	height: 2px;
	background-color: #444444;
	border: 1px solid #444444;
	border-radius: 20px;
}

#divcam {
	position: absolute;
	top:32px;
	left:72px;
	width: 9px;
	height: 9px;
	background-color: #111111;
	border: 1px solid #111111;
	border-radius: 20px;
}

#divglass {
	position: absolute;
	top:76px;
	left:12px;
	width: 208px;
	height: 308px;
	background-color: black;
	border: 0px solid black;
	border-radius: 2px;
}

#divscreen {
	position: absolute;
	top:2px;
	left:2px;
	width: 204px;
	height: 304px;
	background: linear-gradient(bottom right, #00ee00, #6beb00, #00ee00, #6beb00, #00ee00, #0d80ee, #00eeee, #00dddd, #00eeee, #0d80ee, #00eeee, #00dddd, #00eeee, #00dddd, #00eeee, #00eeee, #00dddd);
	background: -webkit-linear-gradient(bottom right, #00ee00, #6beb00, #00ee00, #6beb00, #00ee00, #0d80ee, #00eeee, #00dddd, #00eeee, #0d80ee, #00eeee, #00dddd, #00eeee, #00dddd, #00eeee, #00eeee, #00dddd);
	background: -o-linear-gradient(bottom right, #00ee00, #6beb00, #00ee00, #6beb00, #00ee00, #0d80ee, #00eeee, #00dddd, #00eeee, #0d80ee, #00eeee, #00dddd, #00eeee, #00dddd, #00eeee, #00eeee, #00dddd);
	background: -moz-linear-gradient(bottom right, #00ee00, #6beb00, #00ee00, #6beb00, #00ee00, #0d80ee, #00eeee, #00dddd, #00eeee, #0d80ee, #00eeee, #00dddd, #00eeee, #00dddd, #00eeee, #00eeee, #00dddd);
	border: 0px solid #111111;
	border-radius: 0px;
}

.box {
	position: absolute;
	top:0px;
	left:0px;
	width: 204px;
	height: 304px;
	background: linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee);
	background: -webkit-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee);
	background: -o-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee);
	background: -moz-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee);
	border: 0px solid #111111;
	border-radius: 0px;
	-webkit-transition: width 2s ease, height 2s ease;
	-moz-transition: width 2s ease, height 2s ease;
	-o-transition: width 2s ease, height 2s ease;
	transition: width 2s ease, height 2s ease;
}

.box-change {
	top:50%;
	left:50%;
	width: 2px;
	height: 3px;
}

#divhomebttn {
	position: absolute;
	bottom:20px;
	left:94px;
	width: 40px;
	height: 40px;
	background-color: #eeeeee;
	border: 1px solid #bbbbbb;
	border-radius: 30px;
}
</style>
</head>
<body>
<div id="divcase">
 <div id="divoff">
 </div>
 <div id="divsilent">
 </div>
 <div id="divplus">
 </div>
 <div id="divminus">
 </div>
 <div id="divsensor">
 </div>
 <div id="divspeaker">
 </div>
 <div id="divcam">
 </div>
 <div id="divglass">
  <div id="divscreen">
   <div class="box">
   </div>
  </div>
 </div>
 <input type="button" value="" id="divhomebttn">
</div>
</body>
</html>

＆＃13;

我希望按钮缩小.box，但我不知道如何。

有人可以帮我吗？

Answer 1

我将代码分成不同的部分（HTML，CSS和Javascript）然后我将.box-change类中的左侧和顶部位置更改为0。

还删除了#divscreen元素上的重复渐变。

$(function() {
  $("#divhomebttn").click(function() {
    $(".box").toggleClass("box-change");
  });
});

#divoff {
  position: absolute;
  top: -2px;
  left: 160px;
  background-color: #dddddd;
  width: 30px;
  height: 2px;
  border-radius: 1px 1px 0px 0px;
}
#divsilent {
  position: absolute;
  top: 44px;
  left: -2px;
  background-color: #dddddd;
  width: 2px;
  height: 20px;
  border-radius: 1px 0px 0px 1px;
}
#divplus {
  position: absolute;
  top: 79px;
  left: -2px;
  background-color: #dddddd;
  width: 2px;
  height: 15px;
  border-radius: 2px 0px 0px 2px;
}
#divminus {
  position: absolute;
  top: 112px;
  left: -2px;
  background-color: #dddddd;
  width: 2px;
  height: 15px;
  border-radius: 2px 0px 0px 2px;
}
#divcase {
  position: relative;
  top: 0px;
  left: 10px;
  width: 232px;
  height: 460px;
  background-color: #eeeeee;
  border: 0px solid #ffffff;
  border-radius: 32px;
}
#divsensor {
  position: absolute;
  top: 16px;
  left: 106px;
  width: 20px;
  height: 2px;
  background-color: #000000;
  border: 1px solid #000000;
  border-radius: 20px;
}
#divspeaker {
  position: absolute;
  top: 36px;
  left: 97px;
  width: 38px;
  height: 2px;
  background-color: #444444;
  border: 1px solid #444444;
  border-radius: 20px;
}
#divcam {
  position: absolute;
  top: 32px;
  left: 72px;
  width: 9px;
  height: 9px;
  background-color: #111111;
  border: 1px solid #111111;
  border-radius: 20px;
}
#divglass {
  position: absolute;
  top: 76px;
  left: 12px;
  width: 208px;
  height: 308px;
  background-color: black;
  border: 0px solid black;
  border-radius: 2px;
}
#divscreen {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 204px;
  height: 304px;
  border: 0px solid #111111;
  border-radius: 0px;
}
.box {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 204px;
  height: 304px;
  background: linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee);
  background: -webkit-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee);
  background: -o-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee);
  background: -moz-linear-gradient(bottom right, lime, lawnGreen, lime, lawnGreen, lime, dodgerBlue, aqua, #00eeee, aqua, dodgerBlue, aqua, #00eeee, aqua, #00eeee, aqua, aqua, #00eeee);
  border: 0px solid #111111;
  border-radius: 0px;
  -webkit-transition: width 2s ease, height 2s ease;
  -moz-transition: width 2s ease, height 2s ease;
  -o-transition: width 2s ease, height 2s ease;
  transition: width 2s ease, height 2s ease;
}
.box-change {
  top: 0;
  left: 0;
  width: 2px;
  height: 3px;
}
#divhomebttn {
  position: absolute;
  bottom: 20px;
  left: 94px;
  width: 40px;
  height: 40px;
  background-color: #eeeeee;
  border: 1px solid #bbbbbb;
  border-radius: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divcase">
  <div id="divoff">
  </div>
  <div id="divsilent">
  </div>
  <div id="divplus">
  </div>
  <div id="divminus">
  </div>
  <div id="divsensor">
  </div>
  <div id="divspeaker">
  </div>
  <div id="divcam">
  </div>
  <div id="divglass">
    <div id="divscreen">
      <div class="box">
      </div>
    </div>
  </div>
  <input type="button" value="" id="divhomebttn">
</div>

Answer 2

问题是你在将元素加载到DOM之前加载了jQuery函数。要解决这个问题，您需要做的就是在HTML之后移动脚本，或者在页面加载时加载它。

<head> ... </head>
<body> <all your html here>
  <script>
    $(function() {
      $("#divhomebttn").click(function() {
        $(".box").toggleClass("box-change");
      });
    });
  </script>
</body>

或者您可以在页面准备好后调用加载

<head> ...
<script>
  $(document).ready(function() {
    $("#divhomebttn").click(function() {
      $(".box").toggleClass("box-change");
    });
  });
</script>
</head>
<body> ... </body>

按钮不触发动画

2 个答案: