Question

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

问题是我希望动画仅在满足两个条件时触发。 1.如果(#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

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

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'}); }); });

阅读hover

jquery为两个事件两个选择器相同的功能

2 个答案: