jquery-animate

I have a div that scrolls down on the page scroll and when I scroll up the div scrolls up. I would like the opposite This is the code: // SCROLL BUTTON // -- iPhone picture should scroll in when down and down when up jQuery(window).scroll(function(){ jQuery(".iphonepic").stop().animate({ "top": (jQuery(window).scrollTop() - 0.00) + "px"}, "slow"); }); So when you scroll down, the div should go up vertically not the same as the scroll direction. Fiddle demo: http://jsfiddle.net/khaleelm/sQZ9G/7/ Update I also want to limit the DIV not to go higher than -150px, trying if ( parseInt(jQuery("

Is there any way to check if element is being animated? But being animated not with jquery's animate, but with css3's transition.. The problem I have is... I have this slider, on arrow click I give it left = left+200 where left is either element.position().left or parseInt(element.css("left")); (it doesn't really matter, the problem occurs with either) the element is being animated with transition: left 400ms ease-in-out; so, when the user clicks on the arrow once and then again before the animation finishes, left returns value depending on its position(so instead of say.. 400px, it might

I am trying to have a circle div with the class of "bubble" to pop when a button is clicked using jQuery. I want to get it to appear from nothing and grow to its full size, but I am having trouble getting it to work. heres my code: HTML Show bubble ... CSS .bubble { transform: scale(0); } Javascript $('button').click(function(){ $('.bubble').animate({transform: "scale(1)"}, 5000, 'linear'); }); You can perform the transition using CSS and then just use Javascript as the 'switch' which adds the class to start the animation. Try this: $('button').click(function() { $('.bubble').addClass('animate

I got a svg in my application. Like <svg id="gt" height="450" width="300" xmlns="http://www.w3.org/2000/svg"> <image id="1_dice" x="0" y="420" height="30" width="30" xlink:href="images/1_coin.png" /> </svg> I got a svg element named '1_dice'. In a HTML button click I would likes to animate the element according to the parameters. Like $('#btn').click(function(){ $('#1_dice').animate({'x':200},2000); }); I tried this but this doesn't working ... jQuery animate is for animating HTML elements. For SVG you have to try jQuery SVG plugin. Please follow the link - http://keith-wood.name/svg.html It

I have a div #test with a 0 opacity background, I want to animate it until reach the opacity of 0.7. But .animate doesn't seem to work with the css rgba. My css is: #test { background-color: rgba(0, 0, 0, 0); } my html: <div id="test"> <p>Some text</p> <img src="http://davidrhysthomas.co.uk/img/dexter.png" /> </div> and my jQuery: $('#test').animate({ background-color: rgba(0, 0, 0, 0.7) },1000); Here a jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/ thanks a lot for helping! First of all you need to set the property correctly $('#test').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)'

When animating a width toggle, it's not animating the padding, so i looked into .outerWidth() but i'm not exactly sure how to implement this... $('#shareheart').click(function(){ $('.share-text').animate({outerWidth: 'toggle'}, 2000) }) Animate only works on css properties. Im not sure what the toggle key word does but i assume its shortand for alternating hide / show keyword. you could try: $('#shareheart').click(function(){ $('.share-text').animate({ width: 'toggle', 'padding-left': 'toggle', 'padding-right': 'toggle' }, 2000); }); But im not sure how toggle will work with the padding... 来源：

Using a div with solid black color to fade out an image underneath it. In Chrome and Firefox, this works fine, however, in IE, it's backwards. $("div#bgcover").animate( {opacity:.70}, 2500); This starts at 0% opacity and is supposed to animate to 70% over time. In IE, however, it jumps from 0% to 100%, and then fades back down to 70%. Looking for a fix for this. Thanks. Try to set the opacity to zero before you animate it: $("div#bgcover").css({ opacity: 0.0 }).animate( {opacity:.70}, 2500); Opacity does not work in IE (older versions). You will need to animate the filter property: IE var val

Is it possible to have a picture animate from the center outwards rather than from left to right (and top to bottom)? The effect I'm trying to achieve is similar to lightbox, when you click on an image and it expands outwards. Thanks! @Aron's solution is ok, but it comes with certain limitations: you can't have an image within the document flow. My solution actually creates an absolutely positioned clone of the image and shows it on top of the original image. It calculates the original image's absolute position using .offset() . The disadvantage of this method is that if the document flow