Question

我目前正在做一些jQuery，遇到了令人沮丧的问题。我的div#img1默认设置为0.5 opacity。目前，当鼠标悬停在opacity: 1;上时，它会消失为div#img1，当鼠标离开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-function中的代码。

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

Answer 2

https://api.jquery.com/jQuery.data/
存储与指定元素关联的任意数据和/或返回已设置的值。

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

$("#img1").click(function(){
  $(this).data('clicked', true);
  // More code ...
});

Answer 3

有一点css会对你有用吗？

<强> FIDDLE

<img src="http://lorempixel.com/300/300/people" id="lol"/>

$('#lol').on('click',function(){
    $(this).addClass('fullVisible');
});

#lol{
    opacity:0.5;
    -webkit-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
#lol:hover{
    opacity:1;
}

img.fullVisible{
    opacity:1 !Important;
}

jQuery .mouseout（）和.click（）问题

3 个答案: