Michael pro asked 7 years ago


Can i add MDB animations on hover without JS?

In any case, what would be the best solution to implement such an effect, for example on an MDB fa icon?

Thanks in advance,
Michael


Adrian Sawicki free answered 7 years ago


oh okay. So we won't need wow for it.

First solution - pure hover :

<i class="fa fa-pencil swing green-text"></i>

It is enough to call animation on hover event :

.fa-pencil:hover {animation: swing 1s linear .5s infinite;}

Second solution - jQuery (we just toggle animation on mouseenter/mouseleave events) :

$('.fa-pencil').on('mouseenter mouseleave', function (evt) {
  if (evt.type === 'mouseenter') {
    $(this).css("animation", "swing 1s linear .5s infinite")
  } else {
    $(this).attr('style', '');
  }
});

 


Adrian Sawicki free answered 7 years ago


If it is about wow you can't use it without JavaScript. Unfortunately, it needs initialization.

Michael pro commented 7 years ago

As I wrote it is not about wow. That's working just fine. Admittedly, my question title might be a bit misleading. Again one by one: On the page there is a fa-pencil icon. What i want is: User moves the mouse over the fa-pencil element (aka hover!) -> swing animation starts playing What's the best way to implement that? Even with JQuery, how would i do that?

Adrian Sawicki free answered 7 years ago


Hello Michael, Could you precise what would you like to do? Any example? You can just write your animations or try to use existing one and add it on hover.

Michael pro commented 7 years ago

I would like to have an existing MDB animation play on hover over a fa icon, additionally to the one playing on page load/user scroll reveal. Specifically in this case the swing animation on a <i class="fa fa-pencil wow swing green-text" data-wow-iteration="2"></i> element.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags