如果我快速移动鼠标,如何停止对角渐变?

Posted

技术标签:

【中文标题】如果我快速移动鼠标,如何停止对角渐变?【英文标题】:How to stop diagonalFade if I move the mouse very quickly? 【发布时间】:2011-10-16 11:50:51 【问题描述】:

我有以下代码,但如果我真的快速移动鼠标,图像仍然会不断淡入淡出。

如果我使用animate()stop() 可以工作,但是当我使用这个插件时它就不行了。

$('.person a').live('mouseenter', function() 
    $($(this).children('.overstate')).stop().diagonalFade(
    time: 350,
    fadeDirection_x: 'left-right',
    fadeDirection_y: 'top-bottom',
    fade: 'out'
    );
).live('mouseleave', function() 
    $($(this).children('.overstate')).stop().diagonalFade(
    time: 350,
    fadeDirection_x: 'left-right',
    fadeDirection_y: 'top-bottom',
    fade: 'in'
    );
);

html

                <div class="person">
                    <a href="#">
                        <img src="images/p1h.jpg" />
                        <span class="name">Lee</span>
                        <span class="overstate">
                            <img src="images/p1.jpg" />                         
                        </span>
                    </a>
                </div><!--end person-->

css

.person  float:left; width:180px; margin-bottom:40px; height:236px; margin-right:31px; 
    .lastperson  margin-right:0; 
.person a  display:block; width:180px; height:236px; overflow:hidden; position:relative; 
.person img  position:relative; z-index:2000; 
.name  display:block; width:170px; height:34px; background:url(../images/team-name.png) no-repeat top left; font-size:18px; color:#FFF; text-align:left; line-height:33px; padding-left:10px; float:left; position:relative; z-index:5000;
.overstate  left:0; top:0; position:absolute; z-index:3000;  

我认为类似的东西可能会起作用,但如果我将鼠标移过几次就会一直闪烁

$('.person a').live('mouseenter', function() 
  if (!$(this).children('.overstate').hasClass('animated')) 

     $($(this).children('.overstate')).stop().diagonalFade(
     time: 450,
     fadeDirection_x: 'left-right',
     fadeDirection_y: 'top-bottom',
     fade: 'out'
    );

  
  ).live('mouseleave', function() 
      $($(this).children('.overstate')).addClass('animated').stop().diagonalFade(
      time: 450,
      fadeDirection_x: 'left-right',
      fadeDirection_y: 'top-bottom',
      fade: 'in',
      complete: function()  $('.person a').children('.overstate').removeClass('animated'); 
 );

);

【问题讨论】:

还有css,你的整个代码 当我将鼠标悬停时,span.overstate 会通过对角渐变插件获得 opacity:0 并显示 。 【参考方案1】:

恐怕单一的解决方案可能是这样的:

    <script>
    var inactive = 1;
    $(document).ready(function()
        $('.person a').live('mouseenter', function(e) 
            if(inactive==1)
                inactive = 0;
                $($(this).children('.overstate')).stop().diagonalFade(
                time: 350,
                fadeDirection_x: 'left-right',
                fadeDirection_y: 'top-bottom',
                fade: 'out',
                complete:function()
                    inactive=1; 
                

                );
            
        )
        $('.person a').live('mouseleave', function() 

                inactive = 0;
                $($(this).children('.overstate')).stop().diagonalFade(
                time: 350,
                fadeDirection_x: 'left-right',
                fadeDirection_y: 'top-bottom',
                fade: 'in',
                complete: function()
                inactive=1; 

                
            );

        );
)

</script>

【讨论】:

inactive 标志对于每个 .person a 可以是唯一的吗?因为当我从一个人转到另一个人时它不起作用,我相信有问题 Nikos,你可以使用 $(".person a").data("inactive", 1) 或者 $(".person a").data("inactive") 来检索它如果您想为每个 .person 保留一个标志。【参考方案2】:

jQuery 提示:$($(this).children('.overstate')).stop() 是多余的。您可以拨打$(this).children('.overstate').stop()

【讨论】:

以上是关于如果我快速移动鼠标,如何停止对角渐变?的主要内容,如果未能解决你的问题,请参考以下文章

鼠标停止时如何显示气球工具提示

如何在Java桌面应用程序中停止无限循环以移动鼠标

如何在 SwiftUI 中停止快速移动视图的频闪

C#当鼠标移动事件时,时间循环停止

iOS10 +渐变停止工作[重复]

如何停止使用渐变 UICollectionCell 创建新图层?覆盖 func prepareForReuse()