jquery在鼠标移出时返回原始状态答案

【问题标题】：jquery returning to original state on mouseoutjquery在鼠标移出时返回原始状态
【发布时间】：2014-01-15 21:47:45
【问题描述】：

我们在悬停时更改了 html 中的一些内容：

$('.zentriert')
.hover(function(){
    if(!$(this).is(".open")) {
    $(this).animate({opacity: 1}, 150);
    $(this).find('img').css({'position': 'relative'}).animate({top: -10}, 150);
    $(this).find('.beschreibung').css({'display': 'block'}).animate({opacity: 1, top: -10}, 150);
    $(this).addClass('open')
    }})

在鼠标移出时将所有内容恢复到原始状态的最佳方法是什么？这不起作用：

$('.zentriert')
.mouseout(function(){
    if($(this).is(".open")) {
    $(this).animate({opacity: 0.17}, 150);
    $(this).find('img').animate({top: 10}, 150);
    $(this).find('.beschreibung').animate({opacity: 0, top: 10}, 150).css({'display': 'none'});
    $(this).removeClass('open')
    }})

提前感谢您的帮助！

【问题讨论】：

hover 有两个功能。一个 mouseover 一个用于 mouseout。
您应该将$(this) 定义为一个变量，因为您反复使用它。

标签： jquery mouseout

【解决方案1】：

jQuery 中的悬停事件有 2 个回调函数。第一个在用户悬停项目时触发，第二个在它离开时触发

试试

$(".zentriert").hover(
   function() {
     if(!$(this).is(".open")) {
    $(this).animate({opacity: 1}, 150);
    $(this).find('img').css({'position': 'relative'}).animate({top: -10}, 150);
    $(this).find('.beschreibung').css({'display': 'block'}).animate({opacity: 1, top: -10}, 150);
    $(this).addClass('open')
    }
   },
   function() {
     if($(this).is(".open")) {
    $(this).animate({opacity: 0.17}, 150);
    $(this).find('img').animate({top: 10}, 150);
    $(this).find('.beschreibung').animate({opacity: 0, top: 10}, 150).css({'display': 'none'});
    $(this).removeClass('open')
    }
   }
);

【讨论】：