使用jQuery將焦點懸停後的字段懸停

Question

我試圖讓一個字段在盤旋時集中，但僅在3秒鐘的延遲之後。顯然，我做錯了：

var timer; 
 

 
function focusTimer() { 
 
    timer = setTimeout(function() { 
 
     $('#input').focus(), 
 
     3000; 
 
    }) 
 
} 
 

 
$('#input').hover(function() { 
 
    if (timer) { 
 
     clearTimeout(timer); 
 
    } 
 
    
 
    focusTimer(); 
 
});

#input:focus { 
 
    width: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="input">

Answer 1

你做錯了。

你正在把3000放在函數裏面。它向外側移動

timer = setTimeout(function() { 
     $('#input').focus(), 
     3000; 
     ^^^^^^^ 
    }) 

應該

timer = setTimeout(function() { 
     $('#input').focus(); 
    },3000); 

片段

var timer; 
 

 
function focusTimer() { 
 
    timer = setTimeout(function() { 
 
     $('#input').focus(); 
 
     
 
    },3000) 
 
} 
 

 
$('#input').hover(function() { 
 
    if (timer) { 
 
     clearTimeout(timer); 
 
    } 
 
    
 
    focusTimer(); 
 
});

#input:focus { 
 
    width: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="input">

Answer 2

使用過渡延遲：

#input { 
    -webkit-transition-delay: 5s; 
    transition:width 5s; 
    transition-delay:5s; 
    width:100px; 
} 

#input:focus { 
    width:200px; 
} 

懸停在輸入：

#input:hover { 
width:200px; 
} 

Answer 3

var timer; 
 

 
function focusTimer() { 
 
    timer = setTimeout(function() { //change your setTimeout like this 
 
     $('#input').focus(); 
 
     
 
    },3000); 
 

 
    
 
} 
 

 
$('#input').hover(function() { 
 
    if (timer) { 
 
     clearTimeout(timer); 
 
    } 
 
    
 
    focusTimer(); 
 
});

#input:focus { 
 
    width: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="input">

Answer 4

$("#i").hover(function() { 
 
    setTimeout(function() { 
 
    $("#i").focus(); 
 
    }, 1000); 
 
}) 
 

 

#i { 
 
    width:300px; 
 
    transition:width 1s; 
 

 
#i:focus { 
 
    width: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="i">