Question

编写工作代码，但它很重要。如何减少此代码：

$('.js_service').mouseenter(function() {
    $(this).find('span').addClass("js_animated fadeOutLeft");
  })
  .mouseleave(function() {
    $(this).find('span').removeClass("fadeOutLeft").addClass("fadeInLeft");
  })
  .mouseenter(function() {
    $(this).find('span').removeClass("fadeInLeft").addClass("fadeOutLeft");
  });

Answer 1

您可以将这些全部转换为一个hover()处理程序。

$('.js_service').hover(function() {
   $(this).find('span').toggleClass("js_animated fadeOutLeft fadeInLeft") 
});

当只提供一个参数时，它将同时为mousenter和mouseleave触发，而toggleClass将处理添加/删除类。

如果你提供2个处理程序作为参数，那么第一个是mouseenter，第二个是mouseleave

$(selector).hover(function(){
  /* mousenter code */
},function(){
  /* mosueleave code*/
});

参考： hover() API docs

Answer 2

您不需要两个mouseenter处理程序：

$('.js_service').mouseenter(function() {
    $(this).find('span').addClass("js_animated fadeOutLeft")
                        .removeClass("fadeInLeft");
    })
    .mouseleave(function() {
        $(this).find('span').removeClass("fadeOutLeft").addClass("fadeInLeft");
    })

如果使用hover绑定它，您实际上可以将其转换为单个处理程序：

$('.js_service').hover(function(e) {
    if (e.type === "mouseenter") {
        $(this).find('span').addClass("js_animated fadeOutLeft")
                            .removeClass("fadeInLeft");
    } else {
        $(this).find('span').removeClass("fadeOutLeft").addClass("fadeInLeft");
    }
})

Answer 3

您可以使用悬停功能，在两个事件中触发一个函数或两个函数。 Here is the documentation page

$('.js_service').hover(function() {
   $(this).find('span').addClass("js_animated").toggleClass("fadeOutLeft fadeInLeft");
});

此代码将确保您拥有js_animated类，并将切换fadeOutLeft和fadeInLeft。确保您的跨度有一个类开始，否则它们将同时打开和关闭。在你的情况下，我认为你想要在它们上面有fadeInLeft类。

短码mouseenter＆amp;鼠标离开

3 个答案: