jQuery アニメーション

下記のプログラムで
隠れた後では「0px」と表示されると思ったのですが、そうはなりませんでした...。
どのようにすれば0pxと表示されるかご教授お願いいたします。

HTML
1
2<html>
3	<head>
4		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5		<script type="text/javascript" src="../../../css_js/jquery-1.8.0.min.js"></script>
6		<script type="text/javascript">
7		
8			function alertFunc(){
9				var myWidth = $("div").css("width");
10				alert(myWidth);
11			};
12		
13		
14			$(function () {
15				$("button").click(function(){
16					$("div").toggle(1000, alertFunc);
17				});
18			});
19			
20		</script>
21		<style type="text/css">
22		<!--
23			div{
24				width:100px;
25				height:100px;
26				color:#fff;
27				background-color:#09C;
28			}
29		-->
30		</style>					
31	</head>
32
33	<body>
34		<button>click</button>
35		<div></div>
36	</body>
37</html>

行動規範の内容に同意します

回答2件

jQuery の toggle は最終的に <div style="display: none;"></div> になるので、widthの値はCSSで指定した値になります。

投稿2019/07/05 09:22

kei344

総合スコア69407

こうすれば0pxになります

javascript
1function alertFunc(){
2  var myWidth = $("div").css("width");
3  alert(myWidth);
4};
5
6$(function () {
7  $("button").click(function(){
8    $("div").animate({width:0,height:0},1000).queue(function(){
9      alertFunc();
10      $(this).dequeue();
11    });
12  });
13});