event-handling - jquery 两个事件两个选择器相同的功能

Question

我正在尝试创建一个 jquery 动画。

问题是我希望动画仅在满足两个条件时触发。1. if (#element1).mouseleave==true and (#element2).mouseleave==true，则触发函数。

$(document).ready(function(e) {
  $('#contact').add('#rt').mouseenter(function(){
     $('#contact').animate({bottom:'45px'}).add('#rt').animate({marginTop:'555px'});
     });
  if(($('#contact').mouseleave()==true)&& ($('#rt').mouseleave()==true)){
  $('#contact').animate({bottom:'-2px'}).add('#rt').animate({marginTop:'600px'});
}
});

mouseenter 的功能正常，问题在于 mouseleave 事件。该功能不会触发。有什么建议么？

Answer 1

您需要做的是在每个元素上设置一个 mouselave，然后当一个鼠标离开时，检查另一个以确保光标位置不在元素上，反之亦然。如果满足条件，则使用您的动画调用函数。

Answer 2

尝试这个，

$(document).ready(function(e) {
    $('#contact').add('#rt').mouseenter(function(){
        $('#contact').animate({bottom:'45px'}).add('#rt').animate({marginTop:'555px'});
    });
    $('#contact').mouseleave(function(){
        $('#contact').animate({bottom:'-2px'}).add('#rt').animate({marginTop:'600px'});
    });
});

或者

$(document).ready(function(e) {
    $('#contact').add('#rt').hover(function(){
        $('#contact').animate({bottom:'45px'}).add('#rt').animate({marginTop:'555px'});
    },function(){
        $('#contact').animate({bottom:'-2px'}).add('#rt').animate({marginTop:'600px'});
    });
});

阅读悬停