search

malsup / cycle2

2nd gen cycling
899 stars 239 forks source link

fadeout transition removes first image in zero time, before fading in the 2nd image. #812

Open alphex opened 7 years ago

alphex commented 7 years ago

The fadeout transition doesn't work for me.

you can see this in production here http://www.pcah.us

The home page slideshow removes the first div in zero time, and then fades in the next div (250ms)

I'm working on this a dev environment... and nothing I do seems to do anything else.

"fadeout" also does the same thing.

"scrollHorz" also removes the first div in its entirety, and then the next div slides in.

I'm using a "> div" as the slide item, not an image.

Thoughts?help? Thanks!

the code below shows "fadeout". (which doesn't work either)

Thanks.

`

    <div class="slideshow">

        <div class="cycle-slideshow"

                                data-cycle-pause-on-hover="true"
                data-cycle-timeout="250"

                data-cycle-fx="fadeout"
                data-cycle-speed="6000"
                data-cycle-prev="#prev-12705, #smprev-12705"
                data-cycle-next="#next-12705, #smnext-12705"
                data-cycle-pager="#example-page-12705"
                data-cycle-slides="> div"
        >

                                <div>

                                            <a href="/post/questions-practice-visual-artist-ann-hamilton-relationship-between-production-and-consumption">
                    <div class="slide-image" style="background-image:url('http://pcah.dev/sites/default/files/styles/full_width_carousel_1920x770/public/7a965f90010ff4f002c5a2faad589c09.jpg?itok=g7-V0gdY');">

                        <div class="slidecontent">
                            <div class="fullwidth">
                                <div class="slide-node-type">Questions of Practice</div>
                                <div class="slide-node-caption"><a href="/post/questions-practice-visual-artist-ann-hamilton-relationship-between-production-and-consumption">Questions of Practice: Visual Artist Ann Hamilton on the Relationship between Production and Consumption</div>
                            </div>
                        </div>
                    </div>
                    </a>

                </div>

                                <div>

                                            <a href="/post/questions-practice-choreographer-boris-charmatz-“re-enchanting”-public-space-through-dance">
                    <div class="slide-image" style="background-image:url('http://pcah.dev/sites/default/files/styles/full_width_carousel_1920x770/public/drexel-boris-charmatz-2015-32-web.jpg?itok=ElL0Am-i');">

                        <div class="slidecontent">
                            <div class="fullwidth">
                                <div class="slide-node-type">Questions of Practice</div>
                                <div class="slide-node-caption"><a href="/post/questions-practice-choreographer-boris-charmatz-“re-enchanting”-public-space-through-dance">Questions of Practice: Choreographer Boris Charmatz on “Re-Enchanting” Public Space Through Dance</div>
                            </div>
                        </div>
                    </div>
                    </a>

                </div>

                                <div>

                                            <a href="/news/fellows-friday-news-jennifer-kidwell-wins-obie-award-james-ijames-debuts-new-play-pepón-osorio">
                    <div class="slide-image" style="background-image:url('http://pcah.dev/sites/default/files/styles/full_width_carousel_1920x770/public/e838d44f5af2a21e8c66d3fe73c54797.jpg?itok=RLBk7oH4');">

                        <div class="slidecontent">
                            <div class="fullwidth">
                                <div class="slide-node-type">News</div>
                                <div class="slide-node-caption"><a href="/news/fellows-friday-news-jennifer-kidwell-wins-obie-award-james-ijames-debuts-new-play-pepón-osorio">Fellows Friday News: Jennifer Kidwell Wins Obie Award; James Ijames Debuts New Play; Pepón Osorio Opens Site-Specific Installation</div>
                            </div>
                        </div>
                    </div>
                    </a>

                </div>

                                <div>

                                            <a href="/post/questions-practice-performing-arts-producer-jenny-gersten-art-“agent-hope”">
                    <div class="slide-image" style="background-image:url('http://pcah.dev/sites/default/files/styles/full_width_carousel_1920x770/public/q_of_p_preview_image/9-rex-perelman-performing-arts-center-southnight.jpg?itok=7j7xCrqd');">

                        <div class="slidecontent">
                            <div class="fullwidth">
                                <div class="slide-node-type">Questions of Practice</div>
                                <div class="slide-node-caption"><a href="/post/questions-practice-performing-arts-producer-jenny-gersten-art-“agent-hope”">Questions of Practice: Performing Arts Producer Jenny Gersten on Art as an “Agent of Hope”</div>
                            </div>
                        </div>
                    </div>
                    </a>

                </div>

                                <div>

                                            <a href="/node/12829">
                    <div class="slide-image" style="background-image:url('http://pcah.dev/sites/default/files/styles/full_width_carousel_1920x770/public/fairmount-water-works-rivers-restoration-07-web.jpg?itok=aD8VelLp');">

                        <div class="slidecontent">
                            <div class="fullwidth">
                                <div class="slide-node-type">News</div>
                                <div class="slide-node-caption"><a href="/node/12829">In The News: Center-Funded Projects from The Barnes Foundation, Jazz Bridge, Fund for the Water Works, and More</div>
                            </div>
                        </div>
                    </div>
                    </a>

                </div>

                        </div>

        <div class="dotpagers flex">
            <div class="small-arrow-container prev" id="prev-12705"><div class="arrow prev small-arrow">prev</div></div>
            <div class="slideshow-bullets example-pager" id="example-page-12705"></div>
            <div class="small-arrow-container next" id="next-12705"><div class="arrow next small-arrow">next</div></div>
        </div>

        <div class="slideshow-arrows">
            <div class="arrow-container prev" id="prev-12705"><div class="arrow prev big-arrow">prev</div></div>
            <div class="arrow-container next" id="next-12705"><div class="arrow next big-arrow">next</div></div>
        </div>

    </div>

</div>

`