Question

我正在尝试模仿PowerPoint演示文稿的页脚。这是代码

$(function() {
        $('.presentation').on({
          mouseleave: function() {	     
			setInterval(function () {
			if(!$("input").is(":focus") && !$(".presentation:hover").length > 0 && !$('.bp-controls').hasClass('show')){		  
		       $('.bp-controls').fadeOut();	
               $('.bp-controls').removeClass('show');				   
		         }
		     }, 4000);
          },
          mouseenter: function() {
		 $('.bp-controls').fadeTo(500, 1, function() {
           // Animation complete.
		      $('.bp-controls').addClass('show');
             });	            
           }
        });
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="presentation">
         <img src="Main.png" width="50%">
         <div class="bp-controls"><input type="number" pattern="[0-9]*"></div>
        </div>

我不明白为什么setInterval在文档准备好后第一次和第二次可以工作，但是后来又无法工作了。

Answer 1

您要添加多个间隔。您需要在离开时进行清除。同样应该是超时的，我怀疑您想继续触发它。

render() {
    const { state, goBack } = this.props.navigation;    
    const params = state.params || {};

    return (
        <View>
            <Button title="Back to DeviceList" onPress={ () => {
                goBack(params.go_back_key);
            }} />
        </View>
    );
}

多个悬停序列后，jQuery setInterval不起作用

1 个答案: