無限循環一個Javascript函數？

Question

嗨，我有這個javascript函數，如果用戶懸停在另一個div淡入div。當他們將鼠標懸停或離開時，div會退出。

有誰知道我可以循環這個運行無限次，因爲此刻它只做一次。

<script> 
$(".change-profile-pic").hide(); 
$('.img-with-border').hover(function() { 
    if ($('.change-profile-pic').is(":hidden")) { 
     $('.change-profile-pic').fadeTo(0, 500); 
    } else {  
     $('.change-profile-pic').fadeTo(500, 0);    
    } 
}); 
</script>  

Answer 1

如果你真的想使用jQuery（不CSS轉換），然後用.hover， .fadeIn和.fadeOut和我對

的理解

我希望它再次運行並再次每次用戶通過它從它

$(".change-profile-pic").hide(); 
$('.img-with-border').hover(
    function over() { // fade in on mouseover 
     $('.change-profile-pic').fadeIn(500); 
    }, 
    function out() { // fade out on mouseout 
     $('.change-profile-pic').fadeOut(500); 
    } 
); 

---

編輯將鼠標移動和離開沒有淡出懸停時在.change-profile-pic

(function setUpHover() { 
    $(".change-profile-pic").hide(); 
    var timeout = null, 
        over = function over() { 
            window.clearTimeout(timeout); 
            $('.change-profile-pic').fadeIn(500); 
        }, 
        outAfterDelay = function outAfterDelay() { 
            $('.change-profile-pic').fadeOut(500); 
        }, 
        out = function out() { 
            timeout = window.setTimeout(outAfterDelay, 1000); // give enough time to move to elm here 
        }; 
         
    $('.img-with-border').hover(over, out); 
    $('.change-profile-pic').hover(over, out); 
}()); 

Example fiddle（根據jfriend00的demo用JavaScript代替）

Answer 2

您可以使用的setTimeout（）或setIntervall（） 這裏更多：

https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
https://developer.mozilla.org/en-US/docs/DOM/window.setInterval

Answer 3

如果你想要的是該項目在輸入/輸出，只要一個鼠標懸停時，可以使用這樣的代碼脈衝：

<script> 
$(".change-profile-pic").css("opacity", 0); 
$('.img-with-border').hover(function() { 
    var self = $(this); 
    self.data("hovered", true); 

    function fadeInOut(obj) { 
     if (self.data("hovered")) { 
      obj.stop(true).fadeTo(500, 1, function() { 
       obj.fadeTo(500, 0, function() {fadeInOut(obj)}); 
      }); 
     } 
    } 
    $(".change-profile-pic").each(function() { fadeInOut($(this))}); 
}, function() { 
    $(this).data("hovered", false); 
}); 
</script> 

工作演示：http://jsfiddle.net/jfriend00/k54gh/

概念上，這保持了在.data()的懸停項目上標記該項目是否被當前懸停，並且它重複fadeTo 1不透明度，然後只要該項目保持懸停就一遍又一遍地重複fadeTo 0不透明度。它使用第一個淡入淡出的動畫完成功能知道何時啓動第二個淡入淡出和動畫完成第二次啓動重新開始循環。