jquery - animate height not working properly on scroll -


i trying animate height of image when user scrolls container of image.

it works first time when scrollin downwards.

after on scrolling , down not working properly.

it flickers.

my code this

function test($el) {     var docviewtop = $(window).scrolltop(),     docviewbottom = docviewtop + $(window).height(),     elemtop = $el.offset().top,     elembottom = elemtop + $el.height();     return ((elembottom >= docviewtop) && (elemtop <= docviewbottom)      && (elembottom <= docviewbottom) &&  (elemtop >= docviewtop) );   }     $(window).scroll(function(){     var windowwidth = $(window).width();     if(windowwidth >= 680){        $("#desktopgraphwrap, #phonegraphwrap, #ipadgraphwrap").show();       if(test($('div.figurette'))) {         console.log('test success')         $('.fadeanim').fadein("fast", function(){           $('#desktopgraph').animate({             height:"96px"           },"slow", function(){             $('#ipadgraph').animate({               height:"98px"             },"slow", function(){               $("#phonegraph").animate({                 height:"84px"               }, "slow", function(){               });             });           });         });       }else{         $('.fadeanim').hide();         $('#desktopgraph, #ipadgraph, #phonegraph').animate({"height":0},"fast");       }     }else{       $("#desktopgraphwrap, #phonegraphwrap, #ipadgraphwrap").hide();     }   });

i want want 'desktopgraph', 'phonegraph' , 'ipadgraph' animate height bottom top.

when scrolling down should reset height 0 , whenever scroll container div animation should work.

the html this

<div id="desktopgraphwrap"  class="">     <img src="img/blue-bg-web.png" class="img-responsive fadeanim">     <img src="img/desktopgraph.png"  id="desktopgraph" class="img-responsive"> </div> <div id="phonegraphwrap" class="">     <img src="img/blue-bg-iphone.png" class="img-responsive fadeanim">     <img id="phonegraph" src="img/phonegraph.png" class="img-responsive"> </div> <div id="ipadgraphwrap" class="">     <img src="img/blue-bg-ipad.png" class="img-responsive fadeanim">     <img id="ipadgraph"  src="img/ipadgraph.png" class="img-responsive"> </div>

and css this..

#desktopgraph {     position: absolute;     width: 160px;     height: 0px;     left: 36px;     bottom: -150px; } #phonegraph {     position: absolute;     width: 47px;     height: 0px;     left: 287px;     bottom: -172px; } .fadeanim{     position: absolute;     display: none; } #desktopgraphwrap .fadeanim{     left: 36px;     bottom: -150px; } #phonegraphwrap .fadeanim {     left: 287px;     bottom: -172px; } #ipadgraphwrap .fadeanim {     left: 437px;     bottom: -165px; } #ipadgraph {     position: absolute;     width: 73px;     height: 0px;     left: 437px;     bottom: -165px; } #desktopgraphwrap, #phonegraphwrap, #ipadgraphwrap{     position: relative;     float: left; } #desktopgraphwrap, #desktopgraphwrap .animatein {     height: 96px; } #phonegraphwrap, #phonegraphwrap .animatein {     height: 84px; } #ipadgraphwrap, #ipadgraphwrap .animatein{     height: 98px; }

jsfiddle here

http://jsfiddle.net/s489m/8/

i added .stop(true, true) before each of .animate()'s. first 2 not flickering anymore, staying visible when scrolled to.

 $('#desktopgraph').stop(true, true).animate({                         height: $('#desktopgraph').height() == 0 ? 96 : 0                     }, "slow", function () {                         $('#ipadgraph').stop(true, true).animate({                             height: $('#ipadgraph').height() == 0 ? 98 : 0                         }, "slow", function () {                             $("#phonegraph").stop(true, true).animate({                                 height: $('#ipadgraph').height() == 0 ? 84 : 0                             }, "slow");

let me know if closer want.

edit :

i played around more, , got 3 of them stay put when scrolled to. think how want it. http://jsfiddle.net/s489m/9/

    if (!$('.fadeanim').is(':visible')) {         $('.fadeanim').fadein("fast", function (event) {             $('#desktopgraph').stop(true, true).animate({ //added .stop(true, true) here                 height: $('#desktopgraph').height() == 0 ? 96 : 0             }, "slow", function() {                 $('#ipadgraph').stop().animate({ //added .stop() here                     height: $('#ipadgraph').height() == 0 ? 98 : 0                 }, "slow", function() {                     $("#phonegraph").stop(true).animate({ // added .stop(true) here                         height: $('#phonegraph').height() == 0 ? 84 : 0                     }, "slow");                 });             });             // event.stoppropagation();         });     } } else {     $('.fadeanim').fadeout("fast", function (event) {         $('#desktopgraph, #ipadgraph, #phonegraph').stop().animate({ //added .stop() here             height: 0         }, "fast");         // event.stoppropagation();     }); }

Comments

Post a Comment

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

Image
i have page in each contest shown in row. each row contains contest id , link other model names have foreign key contest. news model: class news(models.model): title = models.charfield(max_length=50, null=true) description = models.textfield() time = models.timefield( default= datetime.datetime.now().time()) contest = models.foreignkey(contest) i want use admin adding , changing these models. want when user clicks on 'news' has foreign key contest id=1, shows list of news value foreign key. use {% instance in instances %} <tr class="{% cycle 'row1' 'row2' %}"> <td>{{ instance.title }}</td> <td>{{ instance.starttime }}</td> <td>{{ instance.timespan }}</td> <td>{{ instance.date }}</td> <td><a href="/adm...
Read more

android - Keyboard hides my half of edit-text and button below it even in scroll view -

i having trouble keyboard covers edit-text , half of button in scroll view. here's layout , please tell me how should resolve problem. many questions on topic none of them s working me. <?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@drawable/bg" android:layout_height="match_parent"> <scrollview android:layout_width="match_parent" android:fillviewport="true" android:layout_height="match_parent"> <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <linearlayout android:layout_width="match_parent" android:layout_height="w...
Read more

css - Make div keyboard-scrollable in jQuery Mobile? -

from can tell, although jquery-mobile-powered pages can contain divs overflow set scroll or auto, , these divs can scrolled one-screen bar or mouse wheel, cannot scrolled using arrow keys, page-up/page-down, or home/end. instead, official "page" div (with data-role="page") absorbs input. perhaps other divs can't acquire focus, i'm not sure. is there way around this? edit: jsfiddle of simple example: https://jsfiddle.net/qogz0shx/ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/> <style> #outer { overflow:scroll; height: 50vh; width: 50vw; } #inner { height: 500vh; width: 500vw; } ...
Read more