Need Help Adding An Additional Callback Function

Question

Using Unveil (https://luis-almeida.github.io/unveil/) a lightweight js lazy load plugin.

The site features an example of a callback. I am using it just fine, but would like to add an additional animation to the opacity.

I am not a coder (front end designer) so all that I've tried is basically just a hack and slash attempt at adding another 'this.style' line.

The current script is as follows:

$("img").unveil(200, function() {
      $(this).on("load", function() {
        this.style.opacity = 1;
      });
    });

I am hoping someone can show me how to add another call to load another CSS effect to the above script yet keep the opacity as well. I would like to add the following CSS animation alongside the opacity that's currently being used.

img {
  animation: 1s ease-out 0s 1 slideIn;
}
@keyframes slideIn {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(0);
    }
}

Maybe this link can help you.

Jeroen Heier
– Jeroen Heier

2019-07-06 05:47:22 +00:00
Commented Jul 6, 2019 at 5:47 — Jeroen Heier
– Jeroen Heier, Commented Jul 6, 2019 at 5:47

Subbu · Accepted Answer · 2019-07-06 05:21:04Z

1

To add a new CSS effect, you don't need to add a new callback. You can add all CSS effects right after the other. All the effects that you give will run one by one in a sequential manner.

You could do something like this:

$("img").unveil(200, function() {
  $(this).on("load", function() {
    this.style.opacity = 1;
    this.style.animation = "1s ease-out 0s 1 slideIn"
  });
});

edited Jul 6, 2019 at 5:21

answered Jul 6, 2019 at 3:43

Subbu

6732 gold badges9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tiem Over a year ago

Awesome, totally works. Many thanks for your help Subbu :)

Collectives™ on Stack Overflow

Need Help Adding An Additional Callback Function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related