jQuery .mouseout() 和 .click() 问题

Question

我目前正在兼职做一些 jQuery，遇到了一个令人沮丧的问题。我有一个默认设置为 0.5 opacity 的 div#img1。目前，当鼠标悬停在 div#img1 上时，它会淡化为 opacity: 1; ，当鼠标悬停在 opacity: 0.5; 时淡化为 opacity: 0.5;离开 div#img1 。但是，当我单击 #img1 时，我希望将 div 永久设置为 opacity: 1; 的不透明度。

出于某种原因，它似乎仍然响应 mouseleave(导致点击后不透明度回到 0.5)

var fade = function(object,delay,fadeTime,Opacity){
    $(object).delay(delay).fadeTo(fadeTime,Opacity);
};

var moveX = function(object,delay,position,moveTime){
    $(object).delay(delay).animate({left:position},moveTime);
};

var moveY = function(object,delay,position,moveTime){
    $(object).delay(delay).animate({top:position},moveTime);
};

$(".image").mouseenter(function(){
    fade(this,0,0,1);
    $("p",this).fadeTo(0,1);
});

$(".image").mouseleave(function(){
    fade(this,0,0,0.5);
    $("p",this).fadeTo(0,0);
});

$("#img1").click(function(){
    moveY('#project',0,'-65%',1000);
    moveY('#img2',0,'-34%',1000);
    moveY('#img1',0,'25%',1000);
    moveX('#img1',0,'10%',1000);
    $('#img1').css("opacity","1");
    $('#img1 p').fadeTo(0,1);
    moveX('#imgHelper1',1000,'50%',1000);
});

有什么简单的修复方法可以让我在单击 div 时不触发 mouseleave 命令吗？

Answer 1

实现此目的的最简单方法是在单击 div 后将变量设置为 true，如果该变量不为真，则只需执行 mouseleave 函数中的代码。

var clicked = false;
$(".image").mouseleave(function(){
  if(!clicked){
    fade(this,0,0,0.5);
    $("p",this).fadeTo(0,0);
  }
});

$("#img1").click(function(){
  clicked=true;
  moveY('#project',0,'-65%',1000);
  moveY('#img2',0,'-34%',1000);
  moveY('#img1',0,'25%',1000);
  moveX('#img1',0,'10%',1000);
  $('#img1').css("opacity","1");
  $('#img1 p').fadeTo(0,1);
  moveX('#imgHelper1',1000,'50%',1000);
});