-1

こんにちは、ユーザーが別の div にカーソルを合わせると div でフェードインするこの JavaScript 関数があります。そして、それらがマウスを離すかそれ以上離すと、div はフェードアウトします。

現時点では1回しか実行しないため、これをループして無限回実行する方法を知っている人はいますか。

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

フィドルの例(代わりにこの回答の JavaScript を使用したjfriend00のデモに基づく

于 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 不透明度を繰り返します。最初のフェードのアニメーション完了関数を使用して、2 番目のフェードを開始するタイミングを認識し、2 番目のアニメーション完了を使用してサイクルを最初からやり直します。

于 2012-12-16T17:02:29.187 に答える