Question

Mouseenter和mouseleave同时开火。我想做的就是在鼠标开启时隐藏元素，并显示出来

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

Per @ Terry的评论，fadeOut事件将不透明度设置为0，然后将display设置为隐藏元素的none并触发{{1事件（因为它不再悬停没有显示的东西。

简单地为不透明度设置动画而不是显示（fadeIn，fadeOut）

＆＃13;

mouseleave

＆＃13;

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

＆＃13;

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>

Answer 4

你可以试试这个： 添加CSS：

#mydiv { -webkit-transition: all 0.3s;  -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

添加jQuery：

jQuery("#mydiv").mouseenter(function(event) {
        jQuery(this).css({
            opacity: '0'
        });
    });
    jQuery("#mydiv").mouseleave(function(event) {
        jQuery(this).css({
            opacity: '1'
        });
    });

Answer 5

请试一试。

＆＃13;

$('#myid').on('mouseenter', function(event) {
  $(this).css('opacity', 0);
});

$('#myid').on('mouseleave', function(event) {
  $(this).css('opacity',1);
});

＆＃13;

#myid{
  -webkit-transition:0.5s;
  transition:0.5s;
}

＆＃13;

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

＆＃13;

Mouseenter和mouseleave同时开火

5 个答案: