我试图在使用之前将函数定义为变量,显然我可以使用 $(this).off('mouseleave',fadeOutt)将其关闭并 $(this).on('mouseleave',fadeOutt)将其重新打开。
为什么这样做:
<div class="table_bg">
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-bordered dt-responsive nowrap res_table" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Ali</th>
<th> Extension</th>
<th> Ext/th>
<th>Comp</th>
</tr>
</thead>
<tbody ng-hide="loading">
<tr ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)" ng-repeat="docType in DocTypes" ng-cloak ng-mouseenter="hover(docType)" ng-mouseleave="hover(docType)">
<td>{{$index}}</td>
<td>
{{docType.Desc}}
</td>
<td>{{docType.LI}}</td>
<td>{{docType.Ext}}</td>
<td>{{docType.EXT}}</td>
<td>{{docType.Comp}}</td>
</tr>
</tbody>
</table>
但不是这样:
var fadeDarl = function(){
$("#darl").on({
mouseenter: function(){
$("#bgimg1").stop(true,true).fadeIn(200);
},
mouseleave: function() {
$("#bgimg1").stop(true,true).fadeOut(200);
}
});
};
fadeDarl();
答案 0 :(得分:2)
在此代码中:
var fadeDarl = function(){
$("#darl").on({
mouseenter: fadeInn(),
mouseleave: fadeOutt()
});
};
当您在fadeInn
之后加上括号时,您调用该函数并将其返回值分配给mouseenter
。
您真正想要做的是将函数本身分配给mouseenter
,以便稍后在指定的事件触发时调用该函数。
所以只需删除这些括号,它就会按预期工作。
如果您来自一种无法通过引用传递函数的语言,但在JavaScript函数中first-class objects,这可能会让您感到困惑。
答案 1 :(得分:1)
你需要传递函数而不是调用它:
更改
$("#darl").on({
mouseenter: fadeInn(),
mouseleave: fadeOutt()
});
到
$("#darl").on({
mouseenter: fadeInn,
mouseleave: fadeOutt
});
答案 2 :(得分:1)
删除括号。您正在调用该函数并返回该值,而不是将该函数分配给该事件。
mouseenter: fadeInn(),
mouseleave: fadeOutt()
答案 3 :(得分:1)
你传递的评价/结果不是函数本身,它应该是:
$("#darl").on({
mouseenter: fadeInn,
mouseleave: fadeOutt
});
答案 4 :(得分:1)
谁说你不能将fadeInn()更改为fadeInn
答案 5 :(得分:1)
当您执行mouseenter: fadeInn()
时,您将使用fadeIn()的返回值绑定mouseenter事件。
因此,该函数只在绑定时被调用一次,然后在mouseenter上它将尝试调用返回值,即undefined。
因此,不应该绑定返回值,而应该
mouseenter: fadeInn
将完成工作
答案 6 :(得分:0)
老实说,你应该使用正确的工具来做正确的工作。这是css为之构建的东西。另外,你将获得由GPU而不是cpu加速的动画硬件,你不会锁定js的单个线程。唯一一次我喜欢js对css的限制是当我需要挂钩动画生命周期中的事件时,或者需要像补间一样更复杂的动画。
#darl figure {
opacity: 0;
visibility: hidden;
transition: .2s all;
display: inline-block;
}
#darl:hover figure {
opacity: 1;
visibility: visible;
}
&#13;
<div id="darl">
<p>I am a div. there are many like me but this one is me</p>
<figure id="bgimg1" class="fade_wrapper">
<img src="http://lorempixel.com/100/100" />
<figcaption>lorem pixel yall</figcaption>
</figure>
</div>
&#13;