鼠标和鼠标同时射击

Question

鼠标和鼠标同时射击。我只想在鼠标打开时隐藏元素，然后显示出来。

​

$('#myid').on('mouseenter', function(event) {
  $(this).fadeOut();
});

$('#myid').on('mouseleave', function(event) {
  $(this).stop().fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid" >{{property}}</span>

​

Answer 1

根据@Terry的注释，fadeOut事件将不透明度动画为0，然后将display设置为none，这将隐藏元素并触发mouseleave事件(因为它不再悬停于未显示的内容。

简单地动画不透明，而不是显示(fadeIn，fadeOut)

​

$('#myid').on('mouseenter', function(event) {
  $(this).animate({'opacity': 0});
});

$('#myid').on('mouseleave', function(event) {
  $(this).animate({'opacity': 1});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid" >{{property}}</span>

​

Answer 2

您还可以仅使用CSS实现此效果。

​

#myid {
  opacity: 1;
  transition: 0.4s;
}

#myid:hover {
  opacity: 0;
  transition: 0.4s;
}

<span id="myid" >{{property}}</span>

​

Answer 3

你可以试试这个

​

$('#myid').on('mouseenter', function(event) {
  $(this).hide();
});

$('#myid').on('mouseleave', function(event) {
  $(this).fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid">{{property}}</span>

​