Make Animate with scrollTop

Asked

Viewed 330 times

0

I want you to div #parte3 stayed display:block when you get to the scrollTop = 1110. My syntax

console.log($(window).scrollTop(), $(window).scrollTop() > 1110);
    if ($(window).scrollTop() > 1110) {
        $("#parte3").animate("display", "block");
    };
jquery

  • I can’t imagine what would be the point of animating the property display, since there are no intermediate situations. It is easier for you to explain the desired outcome than the way you are trying to do it. Would not simply .css( "display", "block" ) ? And other than that, you’d have to put that test on the scroll, and return the property to the original if it’s less than 1110.

  • 1

    if possible post the rest of html/css code or some example on the internet.

  • I think you should use .css() instead of Animate: $("#parte3").css("display", "block");. If you want to make a transition you have to use visibility or $("#parte3").fadeIn()

  • @Sergio I’d like to let a dalay until the div shows up, I don’t want it to be a quick move.

  • Have you tried it with $("#parte3").fadeIn() or .faeOut()?

  • 1

    What’s the difference to this other question what did you do in December? The problem seems the same, lack a Liener for the scroll event.

Show 1 more comment

1 answer

5


Probably something in this line you need:

$(/* elemento desejado, ou simplesmente window */).bind('scroll', function() {
   if ($(window).scrollTop() >= 1110) {
      $("#parte3").css("display", "block");
   } else {                                  // use o else se quiser reverter ao subir.
      $("#parte3").css("display", "none");   // aqui ponha o display original.
   }
});


If you’re talking about display:none, swap for opacity with animate (or fadeTo, which is the simple way of jQuery).
EDIT: How well remembered by @Sergio, if it shows 100%, just use .fadeIn().

$(window).bind('scroll', function() {
   if ($(window).scrollTop() >= 1110) {
      $( "#parte3" ).fadeTo( 500, .5 ); // velocidade, transparência
   } ...

In this case, do not use display:none initially, and yes opacity: 0.


And yet, if you want a timer before the effect, you have the .delay():

$(window).bind('scroll', function() {
   if ($(window).scrollTop() >= 1110) {
      $( "#parte3" ).delay( 500 ).fadeIn( 500 );
   } ...

  • excellent answer, I’m looking for something like this, have you? http://tympanus.net/Development/GridLoadingEffects/index.html

  • @Felipestoker I think I’ve even seen someone asking for this same effect here, I’ll see if I think what it was.

  • Not quite what I would like, but rather something similar to the plugin I posted in my question, I would like the <section> appear with the mouse scroll.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.