Streaming live at 10am (PST)

Jquery Novice need correction


#1

This my ugly code:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<script>
    $(function() {
        $('.landingnav-link').click(function(){
            $('.free-right').animate({backgroundColor: 'green'}, 'slow');
            
            $('html, body').animate({
                scrollTop: ($('#unlimitedleft').offset().top)
            },500);
        });
    });  
});

What I am trying to achieve is to change the color of a class after successfully scrolling to a div. Can someone point me to the right direction? Thanks.


#2

Hey @topelovely, my guess would be to take advantage of the done callback in the .animate() API, so that you only animate the background color after the animated scroll completes:

<script>
    $(function() {
        $('.landingnav-link').click(function(){
            $('html, body').animate({
                scrollTop: ($('#unlimitedleft').offset().top)
            }, 500, function() {
                $('.free-right').animate({backgroundColor: 'green'}, 'slow');
            });
        });
    });  
});

#3

Not a savvy code person. Would love if you kindly show me how to incorporate it into the code. However, the code is still not working. Thanks ahead.


#4

Why dont you do it using Webflows interactions? It is as easy as 123


#5

I will appreciate if you can point me to how to use interaction to change a color of a div in webflow. Because I can' t find that in any of the options.


#6

The way I would do it using Webflows interactions wold be to stack divs on top of each other and simply fade one out on scroll and display the next. Granted the change would not be animated but it will change.

So I would build it like:

<div1> I am the content </div>
<div2> color 1 </div>
<div3> color 2 </div>

Apply scroll interaction to div2

Check it out

Cheers


#7

Thanks, but not what am looking out for. Most appreciated.


#8

Hi @topelovely, do you have a site link you can share?. I took at look at @callmevlad's suggestion, and that seems like a good solution to me smile I am happy to check out the site, and how you are trying to integrate this, if you can provide the link to the site you are working on smile

Cheers, Dave


#9

Thanks for your response. I have since looked inwards. Using IX to deliver my concept.


#11