jQuery fadeTo calls not functioning as expected when called by scroll()


I’ve been learning Ruby on Rails and Javascript and trying to learn to animate things as I go.

I have a series of bootstrap cards generated by an Articles controller and shown by an article partial in an index view, where the list of cards (representing posts/messages) proceeds down the page. I want these cards to fade into view as they are scrolled into.

I start the card opacity at 0 with css:

$bg_color: #23282e;
$corner_radius: 5px;

.card {
  border-radius: $corner_radius;
  opacity: 0;
}

and fade it to 1 with javascript:

function fadeCardsIn() {
    const window_top = $(window).scrollTop()
    const window_bottom = $(window).scrollTop() + $(window).innerHeight()

    console.log(`Viewport: ${window_top} to ${window_bottom}.`)

    const cards = $(".card")
    let count = 0

    cards.each(function() {
        count += 1
        const card = $(this)

        const card_top = card.offset().top;
        const card_bottom = card.offset().top + card.outerHeight()

        // If our card is in the range of the window viewport.
        if ((window_bottom > card_top) && (window_top < card_bottom)) {
            card.fadeTo(1000, 1, "swing")
            console.log(`Showing card ${count}.`)
        } else {
            card.fadeTo(1000, 0, "swing")
        }
    })
}

$(document).ready(fadeCardsIn)
$(window).scroll(fadeCardsIn)

I’ve taken the bits that should allow things to function without all the rails backend and without the partial, with several cards copied/pasted in the html to simulate what I’m working with in the rendered view:
https://jsfiddle.net/n9kemt3L/5/

On load, the javascript function works as expected with the first few cards in the viewport fading in. However on scroll, based on the console log, the correct cards are "showing" and should be animating/fading in, but they either never fade in, or fade in / fade out very late (sometimes upwards of 30+ seconds later of not scrolling).

I’m assuming calling the fadeTo function multiple times on the same cards by scrolling is causing an issue, possibly calling fadeTo many times before the first fadeTo has even completed, but I’m not sure.

How should I go about beginning to solve this? Any suggestions to nudge me in the right direction are very welcome.

If the fadeTo excess calls are breaking the animations, then I imagine I might need to add some sort of state to know when each card is being animated into/out of, but I don’t know where I should start with that if that were the case, as each card is generated by rails and served via pagination, and I’m just iterating over each card on the final rendered with jQuery’s each() function.

On another note, I haven’t been able to get fadeIn and fadeOut to function at all in this setup, hence me making use of fadeTo instead.

Is there a better way to go about this other than calling this sort of function on scroll?

Source: JavaSript – Stack Overflow

November 10, 2021
Category : News
Tags: javascript | jquery | ruby-on-rails | sass

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.