Author avatar

Vivek Kumar

Handling Fading Feature with Mouse Hovering

Vivek Kumar

  • Jun 11, 2019
  • 10 Min read
  • 723 Views
  • Jun 11, 2019
  • 10 Min read
  • 723 Views
Web Development
React

Introduction

In CSS animation, the transition effects play a crucial role in rendering the desired results. It doesn't take much time for a coder to realize that the appropriate fade-in and fade-out features are necessary to render the standard animation process for the desired outcome.

Common Pitfalls and Correct Procedure

Most of the professional coders will go with the following code in order to make an image alteration in their SRC on hover:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".social").on({
    mouseenter: function () {
        $(this).data("original-src", $(this).attr("src"))
            .fadeOut(250, function () {
            $(this).attr("src", $(this).attr("data-src"));
        }).fadeIn(250);
    },
    mouseleave: function () {
        $(this).fadeOut(250, function () {
            $(this).attr("src", $(this).data("original-src"));
        }).fadeIn(250);
    }
});
javascript

While moving the mouse over again and again, if you are facing an issue then the animation turns out to be recurring and it can adversely affect the queue. One can try to rectify it with the help of .stop() via the following way:

Use stop(true, true) (clear the queue? true, jump to the end? true)

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".social").on({
    mouseenter: function () {
        $(this).data("original-src", $(this).attr("src"))
            .stop(true, true).fadeOut(250, function () {
            $(this).attr("src", $(this).attr("data-src"));
        }).fadeIn(250);
    },
    mouseleave: function () {
        $(this).stop(true, true).fadeOut(250, function () {
            $(this).attr("src", $(this).data("original-src"));
        }).fadeIn(250);
    }
});
javascript

It is feasible for you to clear out the animation queue by the time you mouse enter and thereafter form animations again.

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".social").on({
    mouseenter: function () {
        $(this).data("original-src", $(this).attr("src"))
            .stop(true, true).fadeOut(250, function () {
            $(this).attr("src", $(this).attr("data-src"));
        }).fadeIn(250);
    },
    mouseleave: function () {
        $(this).stop(true, true).fadeOut(250, function () {
            $(this).attr("src", $(this).data("original-src"));
        }).fadeIn(250);
    }
});
javascript

Now, in the usual scenario, when the user hovers on and off for some amount of times, it wobbles back and forth for a period of 3 to 4 seconds. It is the time taken to complete all fade in/ fade out effects. These errors are generally prevented with .stop(). One can remove the fade in if one hovers off the button prior to the command $(".txtWrap").stop().hover() as shown:

1
2
3
4
5
6
7
8
9
10
11
$(".txtWrap").stop().hover(
  function () {
    $(this).find('.txtBock').fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').fadeOut();
  }
)
javascript

In case an error is returned, indicating that the stop() is placed incorrectly, then the following codes can be tried:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".txtWrap").hover(
  function () {
    $(this).find('.txtBock').stop().fadeOut();
    $(this).find('.txtDesc').fadeIn();
  //  $('#timeTxt').fadeOut();
  //  $('#timeTxtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').stop().fadeOut();
  }
)
javascript

Removing Opacity Without Hiding the Element

If you encounter a problem with element’s opacity then it is feasible for you, as a user, to handle the issue without concealing the actual element. If you prefer to keep them concealed then you can use .hide() and you will be required to include a callback to the transition function.

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".txtWrap").hover(
  function () {
    $(this).find('.txtBock').stop().animate({opacity:0}, 500);
    $(this).find('.txtDesc').animate({opacity:1}, 500);
  //  $('#timeTxt').fadeOut();
  //  $('#timeTxtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').animate({opacity:1}, 500);
    $(this).find('.txtDesc').stop().animate({opacity:0}, 500);
  }
)
javascript

Apart from that, you can also give consideration to the .hoverIntent() plugin which has proven to be seamless. It is flexible and the configuration can be customized as per your need and convenience.

All that is required to do is to include the plugin and contain the word Intent.

1
2
3
4
5
6
7
8
9
10
11
$(".txtWrap").hoverIntent(
  function () {
    $(this).find('.txtBock').fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').fadeOut();
  }
)
javascript

Some coders have a general complaint that while trying to reset CSS Fadein they end up with the following instruction:

1
2
3
4
5
6
$("#frase1").fadeIn(5000, function() {
   $("#frase2").fadeIn(10000, function() {
      $("#frase3").fadeIn(15000, function() {
      });
  });
});
javascript

In such a case, it is advisable to use the following instruction in order to reset CSS Fadein or any other sort of event in the queue:

1
2
3
$("#frase1").stop(false, true, true);
$("#frase2").stop(false, true, true);
$("#frase3").stop(false, true, true);
javascript

An Application of jQuery in Fading in/out onmouse Hover

In the cases of onmouse hover, the challenge that the coders usually face is that the HTML objects spontaneously fade in or out whenever they scroll the mouse over them.

In order to toggle this fade in or fade out, you can use a close button when the mouse is specifically over that particular element. Additionally, if you wish to fade in an upload button then the mouse can be run over the profile icon.

In the initial stages, the application of jQuery fadeIn and fadeOut approach tends to work swiftly and seamlessly. However, it is when the user quickly toggles among the two when the presence of a certain bug starts creating problems.

It can be well understood from the code mentioned below:

1
2
3
4
5
6
$('.hiddenFormMouseover').mouseenter(function() {
    $(this).children('.hiddenFormMouseoverButton').fadeIn();
});
$('.hiddenFormMouseover').mouseleave(function() {
    $(this).children('.hiddenFormMouseoverButton').fadeOut();
});
javascript

Here, while taking a small glance on the code, everything seems to be normal. But when a person tries to run the mouse over and out of the object in a quick fashion, one can observe the fact that, in spite of holding the movement of mouse, the object relentlessly continues to fade in and fade out for the same number of times the movement of the mouse has taken over it. Basically, it is happening due to the fact that the functions are tossed every time they are under the movement of the user’s mouse. Here, one is required to wait for the completion of the previous function prior to the execution of the present one. If the movement of the mouse is taking place at a quicker pace than the time taken for the object to fade then it will remain in oscillation even after the completion of the function.

It is the basic result which is rendered for jQuery, but it is possibly not the one that you wish to have for your interface. If the movement of the mouse is on the object then it is expected to instantly fade in and stop.

A coder can try a few of the various combinations of additional components into functions such as jQuery stop() (removing the fade in/ out presently in progress); thereafter passing 0 as the kind of time argument to the user’s fade functions (such as fadeout (0) resulting in the immediate fade out of the object). The user can continue to avail slightly better, though still not the ideal behavior, such as stopping objects through half opaque rather than continuous oscillation. It is continuously done until the user can get the pertinent results.

At the time when the cursor accesses the object, you can wish the object to discontinue any other type of fading it might be undertaking and successfully run the complete fadeIn animation. In the meantime, when the cursor departs then the coder would anticipate a reverse outcome i.e., stop fading and thereafter run a complete fadeOut.

Mentioning the program in javascript, as the programmers, we can observe a spontaneously behaving outcome:

1
2
3
4
5
6
7
8
9
10
11
$('.hiddenFormMouseover').mouseenter(function() {
  $(this).children('.hiddenFormMouseoverButton').stop();
  $(this).children('.hiddenFormMouseoverButton').fadeOut(0);
  $(this).children('.hiddenFormMouseoverButton').fadeIn();
});

$('.hiddenFormMouseover').mouseleave(function() {
  $(this).children('.hiddenFormMouseoverButton').stop();
  $(this).children('.hiddenFormMouseoverButton').fadeIn(0);
  $(this).children('.hiddenFormMouseoverButton').fadeOut();
});
javascript

From the above-mentioned code, it is quite clear that while implementing a simple concept, it is important that the execution remains precise, otherwise a sequence of new programs will become necessary to eliminate the bug generated.

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
$("img").on({
  mouseenter: function() {
    $(this).css("opacity", "0.5")
  },
  mouseleave: function() {
    $(this).css("opacity", "")
  },
});
});
javascript

From the above code, it is feasible for the coder to successfully delay the impact with the help of jQuery. The reprogramming of the codes can eliminate the possibility of a bug in the future implications.

The opacity of the image can be successfully improvised by a simple application of the mouse over it. The CSS addition of fadeIn / fadeOut can be rewritten with the application to make things convenient for the coder on each step.

Conclusion

In this guide, you have learned the various problems and their solutions to correctly perform fadein/fadeout on mouse enter/exit.

0