Question

我试图在使用之前将函数定义为变量，显然我可以使用 $（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();

Answer 1

在此代码中：

 var fadeDarl = function(){         
$("#darl").on({ 
    mouseenter: fadeInn(),
    mouseleave: fadeOutt()
});
};

当您在fadeInn之后加上括号时，您调用该函数并将其返回值分配给mouseenter。

您真正想要做的是将函数本身分配给mouseenter，以便稍后在指定的事件触发时调用该函数。
所以只需删除这些括号，它就会按预期工作。

如果您来自一种无法通过引用传递函数的语言，但在JavaScript函数中first-class objects，这可能会让您感到困惑。

Answer 2

你需要传递函数而不是调用它：

更改

$("#darl").on({ 
    mouseenter: fadeInn(),
    mouseleave: fadeOutt()
});

到

$("#darl").on({ 
    mouseenter: fadeInn,
    mouseleave: fadeOutt
});

Answer 3

删除括号。您正在调用该函数并返回该值，而不是将该函数分配给该事件。

mouseenter: fadeInn(),
mouseleave: fadeOutt()

Answer 4

你传递的评价/结果不是函数本身，它应该是：

$("#darl").on({ 
    mouseenter: fadeInn,
    mouseleave: fadeOutt
});

Answer 5

谁说你不能将fadeInn（）更改为fadeInn

Answer 6

当您执行mouseenter: fadeInn()时，您将使用fadeIn（）的返回值绑定mouseenter事件。
因此，该函数只在绑定时被调用一次，然后在mouseenter上它将尝试调用返回值，即undefined。
因此，不应该绑定返回值，而应该

mouseenter: fadeInn

将完成工作

Answer 7

老实说，你应该使用正确的工具来做正确的工作。这是css为之构建的东西。另外，你将获得由GPU而不是cpu加速的动画硬件，你不会锁定js的单个线程。唯一一次我喜欢js对css的限制是当我需要挂钩动画生命周期中的事件时，或者需要像补间一样更复杂的动画。

＆＃13;

#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;

为什么我不能在.on中调用我的函数？

7 个答案: