Fix Jerky Scriptaculous (Script.aculo.us) Animation Effects

I was adding some BlindDown, BlindUp animation effects to something I was working on today with Scriptaculous and had a bit of an issue with jerky animation. I’ve had this before and ended up ditching them but never really investigated why sometimes they are smooth as nobody’s business and others not.

As it happened, today, I had it working nicely, made a change, and the issue arose, thus leading me to the cause.

It turns out that if you add a BlindDown or BlindUp animation to a div that has padding or a margin set in its CSS as the effect begins to execute the div jumps to the padding/margin size and then the BlindUp/BlindDown (or probably others but I haven’t investigated) works on the remaining ‘area’ of the element.

So this is jerky:

<script language="javascript" type="text/javascript">
    Effect.BlindDown("divJerky");
</script>
<div style="height:50px; padding:10px; display:none" id="divJerky">
    
</div>

The solution is this:

<script language="javascript" type="text/javascript">
    Effect.BlindDown("divJerky");
</script>
<div style="display:none" id="divJerky">
    <div style="height:50px; padding:10px">
    </div>
</div>

If you add the padding to an ‘inner’ div all is well in the world again and everything works smoothly…

I know this isn’t exactly astrophysics but it is Friday afternoon and I’ve only just realised what the issue was so I thought I’d share…

Have a good weekend :)

About these ads

50 Responses to “Fix Jerky Scriptaculous (Script.aculo.us) Animation Effects”


  1. 1 Phil August 24, 2007 at 12:53 pm

    Oh my god! Thank you so much for “stumbling” over the cause and resulting fix to this problem… it has plagued me for months.

  2. 2 Graham Pengelly August 24, 2007 at 2:14 pm

    You’re welcome… I’m stuck on another one myself now where the animation jerks if there is a button within the div. I’ve not solved it yet but will be sure to update this when I do…

    Graham

  3. 3 Adam Robertson November 15, 2007 at 11:19 am

    I just tried what you instructed and it seems that the “height” property is actually makes the change! Note if you remove “height” from the style assignment, there’s still a little clunk at the end, but if you remove padding it’s still smooth. Could be my application… but either way is a solution!

    Any other reason you stopped using scriptaculous? I just started using it yesterday and I’d like to know if there’s something better so I don’t get really far into it before realizing it sucks :-P

    Thanks,

    Adam

  4. 4 Graham Pengelly November 15, 2007 at 12:31 pm

    Hi Adam…

    Thanks for dropping by. You might be right about the height, I’ll have to have a look.

    As for your second point I think Scriptaculous is a great library but not without its issues. I’ve been using jQuery for a while now and found it to be much better. It is tiny, really flexible and has a plug-in architecture that results in loads of additional functionality if you want it. I’d really suggest you have a look at that before you get too into Scriptaculous. (http://jquery.com/)

    Have fun

    Graham

  5. 5 John C. Worsley March 6, 2008 at 12:14 pm

    Thanks so much for this solution. You are a prince among men.

  6. 6 Jason Thompson July 2, 2008 at 12:32 am

    Just what I was looking for. Thanks.

  7. 7 Nico July 8, 2008 at 8:32 pm

    I have a jerky effect when the blind down tag is an ordered list
    or when the is inside the blind down tag. In firefox the list initially appears lower that it actually is; when the blinddown has finished it jumps upwards to the correct position (about 20px). the list b Haven’t found a way to fix this yet. Any ideas?

    Nico

  8. 8 Graham Pengelly July 8, 2008 at 8:42 pm

    Hi Nico

    Have you tried wrapping it in a div and using that for the blinddown?

    Graham

  9. 9 Nico July 9, 2008 at 6:15 am

    “Have you tried wrapping it in a div and using that for the blinddown?”

    Yes. Also I tried removing all styles. No success.

  10. 10 pdaddy October 27, 2008 at 12:13 am

    Pure gold!

    I’ve got all over the shop now, but she’s smooth. For me, there was a with width, which I had to move into an inner div.

    Also, The jerks didn’t seem to be present in MSIE6, just Safari and FFx (3 in both cases)

    JQuery does seem to have the momentum at the moment, pity it’s not just included in your rails apps for free.

  11. 11 pdaddy October 27, 2008 at 12:17 am

    Foolish of me to think that HTML tags would not get eaten in a blog comment, what I meant to say was:

    “I’ve got divs all over the shop now, but she’s smooth. For me, there was a td with width, which I had to move into an inner div.”

    the rest held up OK

  12. 12 Doug November 25, 2008 at 12:38 am

    Also found that if, in your container, there’s an element that has a margin or padding top, it’ll mess up.

    Example:
    div
    h4 Title /h4
    /div

    Will cause the jump unless the h4 has padding-top:0 and margin-top:0;

  13. 13 M December 1, 2008 at 11:55 am

    Thanks, helped me to fix the problem.

  14. 14 yassine December 15, 2008 at 3:44 pm

    أتمنى ان تفيدونا بالجديد

  15. 29 Joe August 24, 2009 at 4:56 pm

    Cool man you helped me fix my issue :) Thanks!

  16. 30 The Tim March 30, 2010 at 10:34 pm

    Just wanted to drop you a line to say thanks for posting this. I was having this problem and this page came up in my search for a fix. Worked like a champ.

    Also, you’ve got a pretty large amount of spam comments above this.

  17. 32 Someone who still uses Prototype June 27, 2011 at 9:40 pm

    For what is worth:

    Having two divs as this article suggests, I still had problems with certain browsers.
    I had p tags at the beggining and the end of the content. Removing them solved my issues.

    I could still use the p tags in the middle of the text, it was the beggining and the end the problem, where I would have 12px extra at the top and the bottom, and they were not margins nor paddings.

    To debug this problem, I put background colors to both divs and used Firebug (and Opera Dragonfly) to watch the actual computed styles.

  18. 33 smummadiapymn October 19, 2011 at 4:11 am

    [url=http://cvyters.prv.pl/996/5921.html]Знакомства украина донецкая [/url][url=http://lsaigyrae.prv.pl/9712/12-201086.html]Знакомства иркутск мамба [/url][url=http://cnghityf.prv.pl/1/11-201080.html]Знакомства в ачинске [/url]
    [url=http://muertfw.prv.pl/znakomstva-g-almati/43.html]Знакомства на один раз [/url]
    [url=http://dtyjerip.prv.pl/5/6030.html]Сайт знакомств в миассе [/url]
    Смотри, что мне мама сегодня прислала.Напряжение возрастает. У нас мало времени. -Нам надо уходить.Нее, это Райкири! Райкири!Всего лишь пару минут вашего времени, практически столько же сколько и осталось от ваших жизней.Добрый день, дорогие болельщики.
    Ты когда-нибудь видел Вальтер П-38? [url=http://tysgyet.prv.pl/19-07-201016/29.html]Свинг клуб оргия [/url]
    [url=http://urtrsdx.prv.pl/15/6515.html]Web знакомства онлайн [/url][url=http://cxklysteti.prv.pl/4/11-201076.html]Знакомства для секса киров [/url]
    [url=http://rtuhri.prv.pl/985/09-08-201057.html]Одноклассники интим знакомства [/url][url=http://jsyrtg.prv.pl/362/68.html]Знакомство с женщинами в возрасте [/url]
    [url=http://cvyters.prv.pl/202/04-07-201046.html]Гей знакомства в нижнем новгороде [/url][url=http://cnrweaf.prv.pl/02-20107/127.html]Смс знакомства оренбург [/url]
    [url=http://cgyjdtyh.prv.pl/sayti-znakomstv-v-donetske/4113.html]Интимные услуги в донецке [/url][url=http://xyjterad.prv.pl/23-06-201010/6069.html]Знакомства для секса в егорьевске [/url]

    [url=http://qxdfio.prv.pl/4/miass-seks-znakomstva.html]Миасс секс знакомства [/url]
    [url=http://xyjterad.prv.pl/02-201014/hristianskiy-sayt-znakomstv-v-ukraine.html]Христианский сайт знакомств в украине [/url]

    [url=http://rtoig.prv.pl/18-09-20108/sayt-znakomstv-v-noyabrske.html]Сайт знакомств в ноябрьске [/url][url=http://iufyeredf.prv.pl/17-05-201012/89.html]Интим в кривом роге [/url][url=http://ctyjrtsdf.prv.pl/02-201012/63.html]Сайт знакомств армавир [/url]
    [IMG]http://farm1.static.flickr.com/54/152004154_cee6b8c691.jpg[/IMG]
    Дэйв был в McGill’s. Наверное, опрашивали его, как всех остальных.Может, мне красное надеть?Налево! Не останавливаемся!Ну, тогда они уже не гражданские.Первый раз еду на автобусе. [url=http://fusryd.prv.pl/25-04-20107/09-10-201071.html]Познакомлюсь с мужчиной с ребенком [/url][url=http://xbluyser.prv.pl/11/27-12-201088.html]Секс знакомства бдсм [/url][url=http://crtedw.prv.pl/4/www-mamba-seks-rf.html]Www мамба секс рф [/url][url=http://cuislhr.prv.pl/04-20102/1779.html]Социальные сети для секса [/url][url=http://mlyetgio.prv.pl/znakomstvo-s-parnem-perepiska/02-201014.html]Знакомства для вирта [/url]
    Стой. Мы нарвёмся на полицию.Год назад из цеха похитили атомарный сплав на 7 миллионов долларов.Да, да, ваша честь, все в порядке.Ублюдок. Не смей меня отчитывать.Восхитительно! Невероятно! [url=http://fyukjesru.prv.pl/12-201010/1210.html]Интим в ростове на дону [/url][url=http://ceyfasi.prv.pl/29-09-20104/4.html]Сайт знакомств датинг ру [/url][url=http://xyjdeu.prv.pl/837/3935.html]Знакомства в харьковской области [/url][url=http://kkisyerg.prv.pl/11-20101/39.html]Хочу женщину для секса [/url][url=http://iuossge.prv.pl/7/52.html]Девушка для секса втроем [/url][url=http://rtxbu.prv.pl/raskrutka-sayta-znakomstv/8538.html]Знакомства парень ищет парня [/url]

  19. 34 cialis May 27, 2013 at 6:26 am

    of course like your web-site but you have to take a look
    at the spelling on quite a few of your posts. Several of them
    are rife with spelling problems and I in
    finding it very bothersome to inform the truth nevertheless I’ll definitely come again again.

  20. 35 Claire June 27, 2013 at 12:22 pm

    When you arrive at your hotel, especially if the child becomes lost could wind up making
    a substantial difference in getting them back quickly. It can also stay away from
    these factors, while eating a low-protein diet, rosacea can cause.
    If you do, this lets people realize that easy everyday items such as diabetes and various glandular disorders Infections during
    pregnancy Falling or other illegal drugs.

  21. 36 Miami mustang car rental July 13, 2013 at 3:31 am

    It happens to me sometimes, too. Miami camaro rental

  22. 37 Where to Buy Erectzan July 26, 2013 at 4:16 am

    Hey! I understand this is kind of off-topic but
    I had to ask. Does building a well-established blog like yours take a large amount of work?

    I’m brand new to writing a blog however I do write in my diary on a daily basis. I’d like to
    start a blog so I will be able to share my experience and
    thoughts online. Please let me know if you have any kind of
    ideas or tips for new aspiring blog owners. Appreciate it!

  23. 38 Gary July 26, 2013 at 5:32 am

    certainly like your web site but you need to check the spelling on several of
    your posts. A number of them are rife with spelling problems and I find it
    very bothersome to inform the reality however I’ll certainly come again again.

  24. 39 Знакомства Химки August 5, 2013 at 10:24 pm

    My partner and I stumbled over here by a different web page and thought I should check
    things out. I like what I see so now i am following you. Look forward
    to going over your web page yet again.

  25. 40 ella August 6, 2013 at 8:58 am

    Thank you! This was exactly my problem. but with a SlideDown effect. Looked super weird. When I removed the padding everything worked splendidly!

  26. 41 Madelaine August 11, 2013 at 2:06 am

    This is really fascinating, You’re an excessively skilled blogger. I have joined your feed and look ahead to searching for more of your magnificent post. Also, I have shared your web site in my social networks

  27. 42 zelilokaxa.Web44.net August 14, 2013 at 12:15 am

    I’ve learn some good stuff here. Definitely value bookmarking for revisiting. I wonder how so much effort you place to make this kind of great informative web site.

  28. 43 Jeanette August 14, 2013 at 7:31 am

    Hi, its good paragraph regarding media print, we all be aware
    of media is a enormous source of facts.

  29. 44 livuvijujuz.net84.net August 20, 2013 at 10:42 am

    Hi there! I know this is kinda off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

  30. 45 http://www.youtube.com/watch?v=j03uzw6LmoM November 11, 2013 at 4:58 pm

    If you still have unanswered questions, contact a
    customer service agent. These custom products
    can be anything that has your name, logo, slogan, or even contact information on them.
    However, with the availability of so many promotional
    products in the market now days, selecting the right
    item to gift to your customers can be a difficult task.

  31. 46 sweepstakes and giveaways March 23, 2014 at 6:36 pm

    This is my first time visit at here and i am actually
    impressed to read all at single place.

  32. 47 Trudi May 13, 2014 at 10:39 am

    Although there is no i – Pad help guide, you can
    still learn to connect with your family and friends through your i
    – Pad. re building a business and need to create top
    quality work at speed. Android supports development of all sorts of applications ranging
    from business to health to travel to entertainment and such.


  1. 1 Bogus ugg sites finding shut down by police Trackback on November 22, 2012 at 4:13 am
  2. 2 Sex Trackback on July 22, 2014 at 4:49 pm
  3. 3 Style 3218 82 Nylon Trackback on July 23, 2014 at 8:40 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





Follow

Get every new post delivered to your Inbox.

Join 37 other followers

%d bloggers like this: