无限循环一个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不透明度。它使用第一个淡入淡出的动画完成功能知道何时启动第二个淡入淡出和动画完成第二次启动重新开始循环。