This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

CSS opacity control onclick
#3
(03.01.2022, 06:20)admin Wrote: It's not possible to do this without JavaScript. Animation will work only until the mouse button is released. So only very short animations can be done this way.

JavaScript:
Code:
$(function() {
  $('body').on('click', '.item-control', function() {
    this.classList.remove('active');
    this.offsetHeight;
    this.classList.add('active');
  });
});

CSS:
Code:
.item-control.active {
  animation: clickanim 3s ease-out;
}

@keyframes clickanim {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Hello admin!

Thanks for the reply.
It works on my laptop but not working with Smartphone. Tried on my Iphone and with Android.

Any suggestion?

Thanks!
Reply


Messages In This Thread
CSS opacity control onclick - by adiaz - 30.12.2021, 14:21
RE: CSS opacity control onclick - by admin - 03.01.2022, 06:20
RE: CSS opacity control onclick - by adiaz - 03.01.2022, 10:49
RE: CSS opacity control onclick - by admin - 03.01.2022, 10:51
RE: CSS opacity control onclick - by adiaz - 03.01.2022, 11:38
RE: CSS opacity control onclick - by admin - 03.01.2022, 11:42
RE: CSS opacity control onclick - by adiaz - 03.01.2022, 11:49

Forum Jump: