Databases
StackOverflow2013
Postsdbo
POjQuery Animation - animating different divs at different speeds
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Animation - animating different divs at different speeds
    primarykey
    data
    text
    <p>I have 5 divs layered and a object in the foreground I want to move across them. This is using the paralax effect. I have been sucessfully able to move the object using basic .animate in jQuery. </p> <p>The problem I'm having is getting the background divs to animate properly - or at all. What happens is when I click on my trigger div - the div.cloud1 and div.cloud2 move BEFORE my object does. They also change positions despite my playing with the timing values. </p> <p>All objects in the divs are absolutely positioned - the divs are relative for being able to use z-index. </p> <p>Specifically I'm trying to move div.cloud1, div.cloud2, div.ground, div.Mountain all at different speeds so it gives the illusion of 3d. </p> <p>The object I'm sending across is a different div. </p> <p>I'm not sure what the problem is.</p> <p>Here is my JSfiddle: <a href="http://jsfiddle.net/U6Mu6/" rel="nofollow">http://jsfiddle.net/U6Mu6/</a></p> <pre><code> jQuery(document).ready(function () { jQuery('#cloud-01').css({ backgroundPosition: '50 -180px' }); jQuery('#cloud-02').css({ backgroundPosition: '0 -100px' }); jQuery('#mountains-03').css({ backgroundPosition: '0 50px' }); jQuery('#trees-04').css({ backgroundPosition: '0 50px' }); jQuery('#ground').css({ backgroundPosition: 'left bottom' }); jQuery('#branding').css({ backgroundPosition: 'center 0' }); jQuery('#content').css({ backgroundPosition: 'center 0' }); jQuery('#sec-content').css({ backgroundPosition: 'center 0' }); jQuery('#footer').css({ backgroundPosition: 'center 0' }); jQuery('#wrapper').css({ overflow: "hidden" }); jQuery('#klicker').click(function () { jQuery('#cloud-01').animate({ backgroundPosition: '(-100px -10px)' }, 200000); jQuery('#cloud-02').animate({ backgroundPosition: '(-400px 0px)' }, 20000); jQuery('#mountains-03').animate({ backgroundPosition: '(-2500px 50px)' }, 20000); jQuery('#ground').animate({ backgroundPosition: '(-5000px bottom)' }, 20000); startHim(); jQuery("#full-robot").animate({ left: "50%", marginLeft: "-150px" }, 2000); setTimeout("leaveScreen()", 15000); }); }); var num = 1; function startHim() { num++; jQuery("#sec-content").animate({ top: "-=5px" }, 150).animate({ top: "+=5px" }, 150); jQuery("#content,#branding").animate({ top: "-=" + num + "px" }, 150).animate({ top: "+=" + num + "px" }, 150); if (num &lt; 4) { setTimeout("startHim()", 300); } else { setTimeout("bounceHim()", 300); } } function bounceHim() { jQuery("#sec-content,#branding").animate({ top: "-=4px" }, 150).animate({ top: "+=4px" }, 150); jQuery("#content").animate({ top: "-=8px" }, 150).animate({ top: "+=8px" }, 150); setTimeout("bounceHim()", 300); } function leaveScreen() { jQuery("#full-robot").animate({ left: "100%", marginLeft: "0px" }, 2000); } </code></pre> <p>Just FYI - some of the objects in the fiddle are not included on purpose. I just want to get things working first. </p> <p>I did see a error in JSFIDDLE dealing with implied eval on my setTime expression. But I'm not sure how to fix it. I suppose I could pass the div as function and use .hide instead. </p> <p>All help is welcome thanks!</p> <p>EDIT:::</p> <p>I forgot this: </p> <pre><code>/** * v. 1.02 */ (function($) { $.extend($.fx.step,{ 'background-position': function(fx) { if (fx.state === 0 &amp;&amp; typeof fx.end == 'string') { var start = $.curCSS(fx.elem,'background-position'); start = toArray(start); fx.start = [start[0],start[2]]; var end = toArray(fx.end); fx.end = [end[0],end[2]]; fx.unit = [end[1],end[3]]; } var nowPosX = []; nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; function toArray(strg){ strg = strg.replace(/left|top/g,'0px'); strg = strg.replace(/right|bottom/g,'100%'); strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2"); var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; } } }); </code></pre> <p>})(jQuery);// JavaScript Document</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2089405
    1. USuser2089405
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery Animation - animating different divs at different speeds
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCheck your console. Your functions aren't defined when they are called.
      singulars
      1. POjQuery Animation - animating different divs at different speeds
      1. USDerek S
    2. COYour fiddle has references to parts of the code that are not there.
      singulars
      1. POjQuery Animation - animating different divs at different speeds
      1. USSergio
    3. COhttp://www.greensock.com/gsap-js/ may make your life a lot easier.
      singulars
      1. POjQuery Animation - animating different divs at different speeds
      1. USJack
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload