JQuery Appear .addClass and CSS Transition?

Question

I want to understand how a particular JQuery effect was implemented. On this design company's website, pictures of tablets and people "pop up" when you reach the "About Us" and "The Team" sections. How can I recreate the effect?

I tried to copy-paste the jquery code from the page but couldn't get it to work work. Can someone please tell me what I'm missing?

jQuery('.animated').appear();
jQuery(document.body).on('appear', '.slide', function () {
    jQuery(this).each(function () {
        jQuery(this).addClass('ae-animation-slide')
    });
});

Here is the full code in JSFiddle

Kevin · Accepted Answer · 2013-10-31 23:35:20Z

1

Firstly it seems no DOM is not ready. Use $(document).ready() to tell JQuery to wait until the page is finished loading to run JavaScript:

$(document).ready(function () {
    //put codes in here.
})

I tried your JSFiddle but it seems not showing the image, if you update JSFiddle I can look into again.

Try this updated Fiddle

http://jsfiddle.net/RcvWM/3/

I added webkit css and loaded the jQuery Appear plugin. Make sure you have that included.

.ae-animation-slide {
    -webkit-animation-name: ae-animation-slide;
    // etc
}

edited Oct 31, 2013 at 23:35

Kevin

16.2k25 gold badges81 silver badges128 bronze badges

answered Oct 31, 2013 at 9:22

Alex.Zhe.Han

763 bronze badges

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

2 Comments

user2940260 Over a year ago

jsfiddle.net/RcvWM/2 update! im pretty bad at jquery! Anyway i have update the image if possible i want that the jquery put the "ae-animation-slide" into the img class so when someone visit the page become visible in the browser view port with a nice CSS3 transition effect.

user2940260 Over a year ago

yet in JSFiddle work perfect i gonna try later to put into my website! Ty a lot!

Collectives™ on Stack Overflow

JQuery Appear .addClass and CSS Transition?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related