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不透明度，然后只要项目保持不变就反复淡化0不透明度徘徊。它使用第一个淡入淡出的动画完成功能来知道何时开始第二个淡入淡出，以及动画完成第二个以再次开始循环。

无限循环一个Javascript函数？

3 个答案: