[Bugs] Fading

mikeknappe
(@mikeknappe)

3 years, 4 months ago
Hi there,

I used the fading option to hide/show the button after a certain scroll offset.

This function has two major bugs. (I deactivated the min.js versions to test and fix them.)

wpfront-scroll-top/js/wpfront-scroll-top.js
Line 61 to 64
```
                container.stop().fadeTo(data.button_fade_duration, 0, function () {
                    container.hide();
                    mouse_over = false;
                });
```
The hide function bugs the fadeOut effect at the end of it’s process a bit for me, because it seems that the complete-function will be called shortly before the duration is over. Some overlapping seems to occur. Finally the display-value is hidden, but the opacity-value is still the adjusted one. That’s kinda strange, but more strange is, that this happens too, by replacing the fadeTo function through fadeOut. :-///

Line 86
```
                container.stop().css("opacity", mouse_over ? 1 : data.button_opacity).show();
```
The button will never fadeIn with this line of code! First of all, if the scroll offset is about to show the button, the mouse_over never can be true, because it’s hidden. Second; you put the opacity directly to the adjusted setting without fading in. 😀

Line 86 should look like this to fade in:
```
                container.stop().fadeTo(data.button_fade_duration, data.button_opacity, function () {
                    mouse_over = false;
                });
```

Viewing 1 replies (of 1 total)

Thread Starter

(@mikeknappe)

Another problem is, that you are always stopping the fading action during the scroll event. You should workaround it by using two variables, which detects, if the current fading action is still activ. It should only switch the fading method, if it should be (in/out).

Below the two functions as quick fix, which is working fine for me.


	var isFadingIn = false;
	var isFadingOut = false;
		
        var fnHide = function () {
            clearTimeout(hideEventID);
            if (container.is(":visible")) {
				isFadingIn = false;
				if( !isFadingOut )
				container.stop().fadeTo(data.button_fade_duration, 0, function () {
					container.hide();
					mouse_over = false;
					isFadingOut = false;
				});
				isFadingOut = true;
            }
        };


        var fnScroll = function () {
            if (scrollHandled)
                return;

            scrollHandled = true;

            if ($(window).scrollTop() > data.scroll_offset) {
				isFadingOut = false;
				if( !isFadingIn )
					container.stop().fadeTo(data.button_fade_duration, data.button_opacity, function () {
						mouse_over = false;
						isFadingIn = false;
					});
				isFadingIn = true;
				
                if (!mouse_over) {
                    fnHideEvent();
                }
            } else {
                fnHide();
            }

            scrollHandled = false;
        };

This reply was modified 3 years, 4 months ago by mikeknappe.

Viewing 1 replies (of 1 total)

The topic ‘[Bugs] Fading’ is closed to new replies.

Tags