修改现有的jQuery函数以添加样式/使用.find修改类

Question

这是我的（精简）标记：-

<section class="home-section clearfix">
    <div class="container">
        <h2 class="title"><a href="#">The Title</a></h2>
        <div class="tagline description"><p>The Content</p></div>
        <img class="image" src="#" />
    </div>
</section>

我希望使标题和描述在页面加载时反弹并淡入。为此的所有 CSS 都已正确到位，我只需要正确获取以下 jQuery 函数，以便根据需要更改相关样式和类以触发这些效果的所有 CSS。

这就是我所拥有的：-

function et_slider_animate_items( active_slide ){
        var animation_speed = 400;
        active_slide.find( 'h2, .description' ).css( 'opacity', '0' ).end().find( '.et_animated_item' ).removeClass( 'et_animated_item' );
        setTimeout( function() {
            active_slide.find( 'img' ).addClass( 'et_animated_item' );
            setTimeout( function() {
                active_slide.find( '.description' ).addClass( 'et_animated_item' ).css( 'opacity', '1' );
                setTimeout( function() {
                    active_slide.find( 'h2' ).addClass( 'et_animated_item' ).css( 'opacity', '1' );
                }, animation_speed );
            }, animation_speed );
        }, animation_speed );
    }

active_slide 目前没有在任何地方定义，也不需要，所以我希望修改这个函数以在类home-section中查找h2、description和img，animate如果有人可以建议修改我目前得到的东西的最佳方法，提前感谢。

Answer 1

而不是接收active_slide作为参数，将其声明为局部变量

function et_slider_animate_items() {
    var animation_speed = 400,
        active_slide = $('.home-section');
    active_slide.find('h2, .description').css('opacity', '0').end().find('.et_animated_item').removeClass('et_animated_item');
    setTimeout(function () {
        active_slide.find('img').addClass('et_animated_item');
        setTimeout(function () {
            active_slide.find('.description').addClass('et_animated_item').css('opacity', '1');
            setTimeout(function () {
                active_slide.find('h2').addClass('et_animated_item').css('opacity', '1');
            }, animation_speed);
        }, animation_speed);
    }, animation_speed);
}