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当前未在任何地方定义且不需要，因此我希望修改此函数以在类{{1}中查找h2，description和img }}，home-section如果有人可以提前告知修改我目前所获得的最佳方法，请提前感谢。

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);
}

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

1 个答案: