-1

嗨，我有这个 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>
4

3 回答 3

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);
}());

小提琴示例（基于jfriend00的演示，使用 JavaScript 从这个答案代替）

于 2012-12-16T16:59:35.780 回答
0

您可以在这里使用 setTimeout() 或 setIntervall() 更多：

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

于 2012-12-16T16:45:26.473 回答
0

如果您想要的是只要鼠标悬停，项目就可以脉冲输入/输出，您可以使用如下代码：

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

于 2012-12-16T17:02:29.187 回答