マウスが移動したときのpageXの取得

html
1<body>
2
3</body>

css
1@charset "utf-8";
2body{
3	position:relative;
4}
5.cursor_animate{
6	position: absolute;
7	left: 50px;
8	top: 50px;
9	width: 60px;
10	height: 60px;
11	border: 1px solid #ccc;
12	border-radius: 50%;
13}
14.cursor_animate.cursor_animate--on{
15	animation-name: linearAnimation;
16	animation-duration: 1s;
17	animation-timing-function: linear;
18	animation-iteration-count: 3;
19	animation-direction: alternate;
20	animation-fill-mode:forwards;
21	/*animation-play-state: running;*/
22}
23
24@keyframes linearAnimation {
25	0% {
26		transform: scale(1);
27	}
28	100% {
29		transform: scale(1.5);
30	}
31}
32

js
1$(function(){
2	$(document).on("mousemove",function(e){
3		var pagex=e.pageX;
4		var pagey=e.pageY;
5		$("body").append("<div class='cursor_animate'></div>");
6		$(".cursor_animate").each(function(){
7			var test1 = pagex - $(this).width() /2 ;
8			var test2 = pagey - $(this).height() /2 ;
9			/*console.log(test1);*/
10			　$(this).css({"left":test1,"top":test2}).addClass("cursor_animate--on");
11			/* transition終了時 */
12$(this).on("animationend webkitAnimationEnd oAnimationEnd mozAnimationEnd",function(){
13	$(this).fadeOut( 1500, function() {
14    $(this).remove();
15});
16   
17});
18		});
19		
20		
21		
22	});
23});

マウスが移動した時にtriggerメソッドなので、擬似的にclickイベントを発生させてPAGEXなどを取得してイベントを発生させたいのですがPAGEXなどが取得できません。

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

回答1件

ベストアンサー

下記のようにすればpagexが取得できていることがわかると思います。

js
1$(function(){
2    $(document).on("mousemove",function(e){
3        var pagex=e.pageX;
4        var pagey=e.pageY;
5        console.log(pagex,pagey)
6    });
7});
8```**動くサンプル：**[https://jsfiddle.net/pqh7swtx/](https://jsfiddle.net/pqh7swtx/)
9
10---
11
12多分、単位が無いことが主な問題かと。
13```js
14// $(this).css({"left":test1,"top":test2}).addClass("cursor_animate--on");
15//                            ↓                ↓
16   $(this).css({"left":test1+'px',"top":test2+'px'}).addClass("cursor_animate--on");