FAQ Database Discussion Community


Jquery animation only working when I step through using debugger

jquery,jquery-animate
I have a function that hides or shows a filter: function slide(event) { //a search engine filter var $sideFilter = $(event.currentTarget).prev(); //an arrow that switches its orientation based on collapsed or not var $arrow = $(event.currentTarget).find(".arrow"); //if not hidden, find current height of element (is variable height) if (!$sideFilter.hasClass("fc-hidden")) {...

How to animate “visibility: hidden”?

jquery,html,css,jquery-animate,visibility
here is my problem... Can you help me please? $(".button").hover(function(){ $('.class').css({opacity: 1.0, visibility: "hidden"}).animate({opacity: 0}, 1200); },function(){ $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200); }); It only animates when it is appearing. :-(...

Jquery Animate not working but run console

jquery,console,jquery-animate
Sorry, I can't speak English so excuse me. I have object 'window.userInterface.filmMakinesi'. I this object run console no problem. But when run my javascript file create a problem occurs. Not working. Interesting. window.userInterface.filmMakinesi = function(control) { controlBox = []; controlBox["ileri"] = {dinamikCSS: "top",operator:"-"}; controlBox["geri"] = {dinamikCSS: "bottom",operator:"+"}; secim = controlBox[control].dinamikCSS;...

Animate({right: 0}) not working properly in Chrome and Opera

html,google-chrome,jquery-animate,opera
I try to have an image slide from left to right using only jQuery and it works perfectly with .animate({right: 0}, 1500) on Firefox but not on Chrome and Opera (haven't tried other browsers though). Here is a code example <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Slide this squirrel</title> </head>...

Elements not being hidden after animation is complete

jquery,jquery-animate,hide
I can't for the life of me figure out why this function I'm running isn't hiding the elements. When hovering over a list item I want two divs inside it to animate to a 49% height and when the mouse leaves this list item they go back to 0 and...

iOS 7 jQuery animation fail on mobile opera

jquery,mobile,ios7,safari,jquery-animate
I'm working on drupal theme which should support iOS7 device. On my page I placed little button that scrolls to exact page position (After specified item). I wrote simple function: $('#scrollbutton').click(function(e){ e = e || event; var offset = $(this).offset(); //offset.left -= 20; offset.top += 1; $('html, body').animate({ scrollTop: offset.top,...

Adding linear easing to animation

javascript,jquery,jquery-animate,easing,jquery-easing
The red box increases in height from 0 to its full height, but it does it with swing easing. I can't work out how I can make it linear. I've tried this, and a few other things, but I can't get it to work: $("#movement").animate({"height": open_height}, {duration: slideDuration }, {easing:...

Resize jQuery to auto script works … on all links

jquery,css,jquery-animate,width
I am trying to get a rollover script to resize my social network links from a 32px square icon to the same icon, plus the trailing address. So if I hovered over my Facebook link, the link would go from [f] [t] [g] to [f /facebookpage] [t] [g] and Twitter...

JQuery Stop Animation Queue

jquery,animation,jquery-animate
my aim is change and animate an element (in the case a <h2> and <p>) on the hover of another element (a <div>), to return to it's prior state when un-hovered and for the animation to stop when hovered on another (<div>) element. I've achieved changing the contents and animating...

Jquery animate object using '+=px' stop at a certain px

jquery,html,css3,jquery-animate
i want to animate object from left to right, i am using animate jquery, i am using this to animate from left to right, but not a straight line, i want to movie it on a zigzag pattern, this is my code: function bird1(){ $(".bird1").delay(3).animate({left:'+=100',bottom:'+=20'},2222,"linear"); $(".bird1").animate({left:'+=100',bottom:'-=20'},2222,"linear",bird1); } bird1(); it will...

Animating a range slider back and forth (loop)

javascript,jquery,jquery-ui,jquery-animate,range
I am trying to animate a range slider that slides to the max and down to the minimum over a duration of about 2 seconds for each movement and in increments of 1. I do not want to it to be instantaneous; I want the user to see the slider...

Is it possible to pass 2 functions to .animates complete argument?

javascript,jquery,jquery-animate
function FadeOutIn(qel, qtext, ael, atext) { $(qel, ael).animate({ opacity: 0.0 }, 1000, function() { PopQuestion(qel, qtext), PopAnswers(ael, atext); $(qel, ael).animate({ opacity: 1.0 }, 1000, function() { }); }); } If I remove the PopAnswers function and its associated args it works great on PopQuestion. I am looking to run the...

Fast click on jquery animate with callback

jquery,callback,jquery-animate
Here is the code <div id="button" class="overlay-down">click</div> $(function () { $('#button').on('click', function(){ if($(this).hasClass('overlay-down')) { $(this).removeClass('overlay-down').addClass('overlay-up'); $('#text').stop(true, true).animate({opacity: 0}, 800, function() { // fade #text $('#overlay').stop(true, true).slideUp(500); // then slideup #overlay }); } else if($(this).hasClass('overlay-up')) { $(this).removeClass('overlay-up').addClass('overlay-down'); $('#overlay').stop(true, true).slideDown(500,...

Space between divs and disable hover animation

javascript,jquery,html,css,jquery-animate
I am trying to code my own circle menu with Yii, like Google Inbox. It's almost done but I need delete space between .circle_sub created because of .circle_title. <div id="circle_area"> <div class="circle_main">MAIN</div> <div class="circle_sub"> SUB</div> <div class="circle_title">HINT</div> <div class="circle_sub"> SUB</div> <div class="circle_title">HINT</div> </div> All code with css here....

toggleClass used to execute two different scrollTop methods, not working

javascript,jquery,jquery-animate,scrolltop,toggleclass
So I have the following function running and it works great. The selected div expands with the .slideToggle() function and the page slides down the body with the .animate() and .scrollTop() methods. $('.pfitem').click(function(){ $(this).toggleClass('minimized maximized'); $(this).next().toggleClass('minimized maximized'); $(this).next().slideToggle(1200); }); $('.pfitem.minimized').click(function(){ $('html, body').animate({ scrollTop: $(this).next().offset().top }, 1200); }); Now when I...

jQuery.animate() seems to take duration parameter as a delay [duplicate]

jquery,html,animation,jquery-animate
This question already has an answer here: Animating Bootstrap progress bar width with jQuery 1 answer I'm having the worst trouble in getting my animation works with jQuery. My goal is to animate a 5% width Bootstrap .progress-bar to 100% width. My code: HTML <div class="box"> <div class="box-header"> Box...

Timing and speed of multiple sliding divs

javascript,jquery,html,css,jquery-animate
Please see this fiddle I have set up. You are first confronted by three links. Each link triggers divs to slide out. The link 'john smith' slides out and in at the speed we want. When it slides out the first line slides out then when that is completed the...

Slowing the speed of a Jquery Scroll

javascript,jquery,html,jquery-animate,parallax
I've been using a jQuery scroll to enhance my parallax scrolling page. Specifically, this one. JQuery Scroll to Next Section I am completely new to jQuery, (and have only used some fairly basic JavaScript in the past). I can work out how to change and adapt code found to my...

jquery get .offset value of a variable(element) then animate to it

jquery,jquery-animate,offset,var
I have a simple navigation. <nav> <a href="#section1">page 1</a> <a href="#section2">page 2</a> <a href="#section3">page 3</a> </nav> When the user clicks on one of the links, I want the page to animate to the corresponding section on the page. I can't seem to get the .offset().top value from a variable though....

setTimeout keeps running after clearTimeout has been called

javascript,jquery,jquery-animate,settimeout,cleartimeout
I am animating an object to move to 1 direction while the mouse is down and when the mouse clic goes up, the animation should stop. I'm using setTimeout but it keeps moving for some time after I released the clic. var stopmov function tomove(){ $('.plwid').animate({ left: '+=1' },1); stopmov=setTimeout(function(){...

jQuery animate div to slide down instead of show

jquery,jquery-animate
I found a fiddle that comes close to doing what I need it to but instead of just showing the div I need it to animate the div's in and out on mouse over and when nothing is hovered the all disappear. here's the jQuery... $(document).ready(function(){ $("#nav a").click(function(){ var id...

jquery animate with center responsive

javascript,jquery,html,css,jquery-animate
I'm trying to animate a box to the center of the screen's width using jquery with .css that will respond to browser size adjustment but I can't seem to get it to respond right in the center without refreshing the browser. Here's the code: <div class="box"></div> .box { position: absolute;...

Jquery CSS class animate block to fixed element

jquery,jquery-animate
I have a navbar and when it scrolls past the 250px mark I apply the "fixed-top" CSS class and take it off when it goes below 250px but it comes in very in your face and looks really jumpy so I would like it to slide in and out when...

How to scroll animate to specific ID minus X distance?

javascript,jquery,jquery-animate,autoscroll
I want to scroll to a specific div then have it stop about 70px before the targeted div. Here is the tutorial I got it off: https://css-tricks.com/snippets/jquery/smooth-scrolling/ $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target :...

Animation steps and event data

jquery,function,data,jquery-animate
Ok... I have just written some code that help you to understand my misunderstanding... Some code in body: <div id="jeden"> <p>Jeden.</p> </div> <div id="dwa"> <p>Dwa.</p> </div> And some jquery code: function blurRad(e) { $(this).css({ "-webkit-filter": "blur(" + e.data.blurRad + "px)", "filter": "blur(" + e.data.blurRad + "px)", "-moz-filter": "blur(" + e.data.blurRad...

How to do Background Image horizontal slide

jquery,html,html5,css3,jquery-animate
In a mobile web application i want to create a home page where the background image has got an animation like a portriat image slide. Eg: mobile has got a screen with 360px .. i have a background image 500px ..On page load show position 0 t0 300 and then...

get the progress with animate() JQUERY

javascript,jquery,coffeescript,jquery-animate
Here is the spinet: $('#processing .progress-bar').animate({'width':'60%'},4000); Is it possible to display how the milliseconds are being countdown by the function? for instance I want to be able to display: 4000 3000 2000 1000 0000 then the function stops...

Neither switchClass nor addClass().removeClass() methods working

jquery,jquery-animate,css-transitions,animate.css
I feel like I'm doing this exactly the way I've read online. I actually can get toggleClass to work in a limited way (Toggle sort-of success but not really), but the problems with that method have led me to try switchClass and add/removeClass instead. But... neither does anything when I...

jquery animate left percentage off

javascript,jquery,html,css,jquery-animate
I am trying to move an image (its a picture of a map) inside its container so a specific part of the image(a city) is in the center of its container when a div is clicked. I have this working but the percentage that the image moves to the left...

Unexpected delays in jquery animations

javascript,jquery,animation,jquery-animate
I have a list-element that is initially set to max-height: 200px; overflow-y:hidden;. Beneath that element there is a h3-element you can click to show the entire list. For that purpose, I animated the maxHeight-property of the element with the jQuery animate() method. The animation should last 1.2 seconds. After that,...

jQuery Progress Bar: animate-reset-animate

jquery,jquery-ui,jquery-animate,jquery-ui-progressbar
I have a progressbar which is being animated in a mouseover event in the following way: $("#progressbar .ui-progressbar-value").animate({width: 200}, {duration: 3000},'slow') Then in a mouseout event I want to reset the progressbar to its initial state and then if mouseover is called again the animation must start again. I've got...

jQuery fade out element, replace content and fade back in

javascript,jquery,jquery-animate,fadein
I have a site where I am trying to use a scroll event to 1) fade out a textual version of the company name, 2) replace the content of that element with an image file of the company logo and 3) fade the logo back in. Issues I'm facing: I'm...

Keeping the page vertically fixed on an element, when lots of content is revealed above (so causing scroll)

javascript,jquery,jquery-animate
I have a long page with lots of data tables of hidden content. They are hidden as they are quite repetitive so not all users want to have to scroll past them all the time. Frequently down the page there is the option to click to open up all of...

jQuery animation loop with images [closed]

javascript,jquery,css,jquery-animate
I want to create a really simple slideshow using opacity animation. I can't use fadeIn or fadeOut functions because setting display:none will crash my layout. I have these 4 fixed images, and what I want to do is to animate opacity to 0, then change img src, and then animate...

Infinite scrolling div glitching with images

javascript,jquery,jquery-animate
I'm currently using the following javascript as shown below. It's working well when I place just text within the div .image_scroll_3 but as soon as I insert images the scroll glitches and won't move past the top of the image. Any advice would be much appreciated JS <script> (function($, undefined)...

jQuery Animate not running (or throwing error) on object

javascript,jquery,events,jquery-animate
I have an en event object that I want to increase a property's value. The following code does not seem to change the properties value. var e = jQuery.Event('mousemove'); e.pageX = jQuery(window).width() / 2; jQuery(e).animate({pageX: 1000}, { step: function(){ console.log(this.pageX); jQuery('.mouseover').trigger(this); }, duration: 5000, easing: 'linear' } ); Any ideas...

How to toggle a .click easier?

javascript,jquery,html,css,jquery-animate
I am working on my final for my webpage development class, I am trying to make a blog themed website. I want to make my code it so that there is a profile picture and when clicked it turns into a box and reveals a bio and some other info....

How to prevent multiple clicks triggering multiple animations

jquery,css,animation,jquery-animate
I was wondering how to prevent multiple clicks or that one event is triggered multiple time because of those multiple clicks. Let's say I have to animate an object. One button will trigger the animation, the other button will reset the animation. <div class="div"> Animate Me! </div> <div class="nav"> <div...

Dynamic text color changing

javascript,jquery,colors,jquery-animate
I have written this code for dynamic color changing of text. Function works fine, but problem is that there is a recursion. After call I have js "too much recursion" error. Is there a possibility, or another solution to do this without any problem? function dynamicColor() { $(".class").animate({ color: 'rgb(255,40,80)'...

How do I offset an element based on my mouse position?

jquery,css,svg,jquery-animate,offset
I've got a grid of several <rect> elements inside an SVG. I'm trying to offset the elements based on the position of my mouse. So when my mouse is within a certain range of the element, the element moves away from my mouse. Items closer to the mouse should move...

jquery scale a div to the center of its parent div

jquery,css,jquery-animate
I'm having problem with the scaling of a div toward its own center using the .animate feature in jquery. I have a div (width and height defined in a separate css file - 46px and 50px, position is set to absolute). This div sits within another div (its parent), a...

jquery callback when animate in progress

jquery,callback,jquery-animate
I would like to know how to have a callback whenever animate is in progress, ie starts the animation. This is the code I tried: $('#a').on('click', function() { $('#b').animate({opacity: 0}, 1000, function() { // animation complete $('#c').animate({opacity: 0, 1000}; }); } I don't want #c to animate when #b animation...

Jquery toggle div width on button click

jquery,html,jquery-ui,jquery-animate,slidetoggle
Hello I want to split my page display with divs. Below is my html code. <div id="wrapper"> <div id="divSectionInfo"> </div> <input type="button" value="Toggle screen" class="btn" id="btnSlide"> <div id="divProducts"> </div> </div> div wrapper has 800 px divSection has 300 px and divProducts has 400px. I want to show divSectionInfo full width(800px)/half(300px)...

jQuery run animation alternatively

jquery,jquery-animate
I have two animations: $("#div1").animate({scrollTop:$("#div1").width()},1000); this one animates the scroll of the div to the bottom most point. While the 2nd one, $("#div1").animate({scrollTop:0},1000); animates it back to the top. Now, I want to run these animations alternatively, like the css animations has the alternate mode. Which means as soon as...

Animate needle movement in Gauge chart

javascript,jquery,jquery-animate
I'm using the solution here to plot a speedometer gauge. This is built with Flot charts. I'm trying to animate the movement of the needle. I want the needle to move slowly from start to end. Here is what I have so far. updatePlot = function(actual_length){ var data = [[0,0],positionOnArc(actual_length...

How to make elements inside a
tag disappear one at a time

javascript,jquery,html,jquery-animate,vertical-scrolling
I need to implement a vertical scroller and I decided to do that as a list of child elements nested inside a parent and hide/remove/slideUp those one at a time, causing the effect of the elements below it moving up. I'm trying to do that using JQuery's .each() for iterating...

Problems with jQuery Animating At Click - Twice needed + Wrong effect

jquery,html,css,jquery-animate,navigationbar
So I'm trying to make a navigation bar with when you click on a button / span, there appears a div, from the top, to just below the navigation bar. But, when I click 'Homer', First nothing happens, but the second time I click, then it appears WITH ANOTHER EFFECT,...

jquery animate() not working in chrome and firefox

jquery,google-chrome,jquery-animate
The following jQuery animate function is not working in chrome and Firefox any idea why? It works in Safari perfectly. <!doctype html> <html lang="en" ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <header> <div class="logoDiv"><img class="logoIcon" src="KM&T-world.png"></div> <div><img class="iphone" id="iphoneRight" class="slideLeft" src=""></img></div> <h1...

animating round progress bars in jquery with numbers 0-10+decimals

javascript,jquery,css,jquery-animate,progress-bar
please bear with me as i'm fairly new to jquery & js in general... Here's what i have so far. http://jsfiddle.net/hqwxogqt/1/ $(function(){ var $ppc = $('.progress'), percent = parseInt($ppc.data('percent')), deg = 360*percent/5; if (percent > 2.5) { $ppc.addClass('gt-50'); } $('.ss-progress-fill').css('transform','rotate('+ deg +'deg)'); $('.ss-percent span').html(percent); }); I actually found this somewhere...

JQuery Queue issues

javascript,jquery,jquery-animate,jquery-accordion,jquery-queue
I am having some serious issues making the JQuery queue work. All the defined functions execute at once, so the class change occurs before the animation- we want it to fade out, then change class, THEN fade back in. function animatePlusMinus(){ if ($(this).hasClass("ui-icon-minus")) { $(this).queue("goPlus",function(next) { $(this).fadeOut(500); next(); }) .queue("goPlus",...

jQuery Nested Slider Animation

jquery,jquery-animate
Trying to build a nested slider with jQuery. But i got a problem with the logic for the tabs. Next and previous buttons are easy to create since they have a simple logic to increment or decrement the value. For the anchored slide what would be the best logic to...

jQuery dotdotdot on accordion menu

jquery,jquery-animate,dotdotdot
So I have a set of accordions that I use to show and hide extra content. I am using jQuery's .animate() to do so (well in this case it is using velocity, but essentially the exact same). The closed height shows a few lines of text (height: 95px), and the...

how to change div background image with animation

html,background,jquery-animate
Is there a way to change DIV background with fadeout or animation in JQuery? For example, I wanna change the background with this code $('#DIV').css("background", "url(Image1.jpg)") if (Button1 == true) { $('#DIV').css("background", "url(Image2.jpg)") } ...

Scrolling divs, adjusting height and position automatically

jquery,position,jquery-animate,height,absolute
I need to scroll blocks of content in a div and I need equal space between each block but I can't really predict that the height of each block will be exactly the same, some might have four lines, some might have three. However the only way I got my...

squish a button with border-radius ellipsis

jquery,css,css3,jquery-animate
I'm making a button for my 4 year old. 2 divs, css border-radius:, and jquery .animate. I've used percentage border-radius to get a nice elliptical shape. Everything's working okay so far, except that when the button is "depressed" I need to shorten the underneath part of the button. This is...

JQuery animation makes page jump to top [duplicate]

javascript,jquery,html,jquery-animate
This question already has an answer here: Avoid window jump to top when clicking #-links 8 answers I found a bit of script to make a div loginform slide in from the edge of the back, and back out, on different clicks, of loginshow and loginhide. Also a bit...

Sychronous animations in knockout binding

javascript,knockout.js,jquery-animate
I want to apply animations when certain properties change with my knockout models (specifically a movement). I need these animations to be synchronous, if there is more than one going on things will get very confusing for the user. I would like to use a knockout custom binding to do...

jQuery div Slide in on scrolldown, slide out on scrollup

javascript,jquery,css,scroll,jquery-animate
This lets me slide the #contact div in, but when I scroll up it doesn't slide back out. $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('#scrolltop').fadeIn(); $('#contact').animate({ right: "0px" }, 500 ); } else { $('#scrolltop').fadeOut(); $('#contact').animate({ right: "-115px" }, 500 ); } }); ...

how to make animated 404 gears?

css,css3,jquery-animate,css-animations
I want to make a 404 page with a couple of gears that need to spin for a second or so and then slowly stop spinning and finally stand still completely. This seems to me as a nice effect to let my visitors know that something went wrong (machine/gears stopped...

Animate scatter plot

python,matplotlib,plot,jquery-animate,scatter
I'm building a Python tool for visualizing data structures in 3D. The code below is the full program, it's even set up to run a default test model with some random data; you just need numpy and matplotlib. Basically, you declare a Node, connect it to other Nodes, and it...

how can I make my navbar scroll smoothly to the top on page click

javascript,jquery,html,css,jquery-animate
I am trying to create a site based on this horizontal scrolling method Responsive horizontal page sliding I want the navbar to be vertically central on the first page, but move to the top on the other pages. Example: http://jsfiddle.net/wtvaJ/26/ I have this working, but I want the navbar to...

Can an HTML background be moved with jQuery's animate?

javascript,jquery,html,css,jquery-animate
On my webpage, I have the background image set with CSS, using the HTML selector. The background image is basically like a blueprint schematic background. (i.e. A white grid on a blue background.) CSS: html { display: block; position: absolute; background: url(../assets/background.jpg) repeat; color: #FFF; margin: 0px; padding: 0px; border:...

jQuery animation out of sync

javascript,jquery,jquery-animate
Very shortly after my animation starts, it goes out of sync. The divs are supposed to fade in and fade out after one another. Please take a look at my code below... Thanks (document).ready(function(){ animate_loop = function animate_loop(){ $( "#w01" ).animate({ opacity: 0.4, }, 1000, function(){ $( "#w01").animate({ opacity: 1},...

If/Else Jquery Header animations

javascript,jquery,css,if-statement,jquery-animate
I am having some trouble with this one. I have the following javascript... $(window).on('scroll', function() { scrollPosition = $(this).scrollTop(); if (scrollPosition >= 130) { header.animate({height: '51px'}, 500); mainNav.css("display", "none"); logo.fadeOut("fast"); scrollLogo.delay(300).slideDown("fast"); $(this).off('scroll'); } else { header.animate({height: '130px'}, 500); } }); I am trying to do a series of changes to...

jQuery won't change css or animate… what am I doing wrong?

jquery,css,jquery-animate
Here is the jsFiddle for what I have at the moment: https://jsfiddle.net/vst5fky5/ I am redoing a Flash section in jQuery. There is a logo and 7 inline list items (navigation) that I need to animate from the top. I want to use jQuery to add top:-5em at the beginning, then...

jQuery animation movement

javascript,jquery,jquery-animate
I'm trying to make an animation of a block moving around the window randomly until you click on it, at which point it will disappear and another block will appear. However I'm getting a weird problem where the block will jump around the screen sometimes instead of sliding around. Not...

jquery animate() called on 2 elements only works on one?

jquery,html,jquery-animate
Just wondering if anyone had any insight into why this might be happening. I have a map on my website that scrolls when you move the mouse to the borders of the container its in. It also highlights a specific city when you hover over it, which is accomplished by...

jQuery animate start

jquery,jquery-animate,jquery-queue
Is there a way to call a function right before jQuery animation starts? I want to have a method that is fired before each animation in a potentially long queue. I know .animate() function has start option, but it's being called when animation is added to queue not when it...

Fade on hover using toggle system

javascript,jquery,hover,jquery-animate
When I hover an item, something else should be visible. This works, but how can I animate it? I want it to fade in instead of becoming plain visible. function toggle(){ var workshopscontainer = document.getElementById("workshops-container"); workshopscontainer.classList.toggle("toggle"); } $(".clip").hover(function(e) { e.preventDefault(); toggle(); }); This is the javascript code I'm using to...

Using the height() method in jquery

javascript,jquery,html,jquery-animate,height
I am new to jquery and am currently trying to set a variable equal to the height of some div with id="thing" before animating another div with class=".init_leftbar" by the same quantity. var iHeight = $("#thing").height(); $(".init_leftbar").animate({top: iHeight + "px"}); However, this does not seem to be working. if I...

Stop CSS rotate animation smoothly on unknown keyframe

javascript,css,css3,jquery-animate,css-animations
I have an image that swings using CSS rotate animation. I would like to stop it smoothly (and put it back to its original position when clicking on another element but without getting the jumpy stop feeling). It seems that the expected behaviour only happens on the first iteration of...

Creating a sliding image gallery that does not glitch on image change

javascript,jquery,css,html5,jquery-animate
I have created a sliding image gallery and when the button is pushed it slides the picture across and updates the image attribute for the relevant sections. However this works perfectly like 50% of the time. The other times there is a second glitch and the images then go in...

jQuery Animate spans in a div one by one

jquery,jquery-animate
I'm building some type of one-bar jQuery chart, everything goes well except for filling animation, with my script all the sections animate in the same time. I want to make each section to animate, complete, wait 0.1 sec then pass the the next. $('#chart .chart-item').each(function() { $(this).animate({ width: $(this).data('w') +...

jQuery Animate to auto height, close back up to set height

jquery,jquery-animate,toggle,slidedown
I have a slide Down toggle div which contains a title, content and a toggle open button. I've set up a fiddle but the div currently closes up completely preventing you from opening again. The height i'd like the div to close up to is the height of the title....

Trouble making animating boxes in jQuery

jquery,html,css,animation,jquery-animate
Im trying to make 2 animated boxes in jQuery, CSS and HTML, but the code doesn't work. I made the app in a jQuery tutorial app and it runs fine on the app. When I use the exact code on my PC it doesn't work. What is wrong with my...

How to animate dynamic number of items according to a array of positions

javascript,jquery,animation,jquery-animate,logic
What I trying to achieve is moving div positions according to an array of positions. Number of objects is unknown could be between 4 to 20. Only 4 elements shown at once. To be clear, I've 4 item different positions and each time (like every 4 seconds) items will change...

AngularJs animate background color / colour

javascript,angularjs,colors,jquery-animate,directive
I have been trying to Dynamically Animate a background between 2 colours on click using AngularJs Directives and Controllers (with no success so far). Does anyone know how to do this? I have been trying to store the currCol (stored as an array var pushed into ng-class), but then I...

Animate Div to Reveal Div Behind It

javascript,jquery,animation,jquery-animate
EDIT: It was pointed out that I had a syntax error in my original jsFiddle code - it's fixed. That was unintentional and not my question. My question was instead of doing what I do now, how can I animate it so there's a slide animation? Thanks, sorry for the...

JQUERY each returns data twice =(

jquery,jquery-animate,each
Please, play with teh fiddle below. ONE bug goes as it should - turns its "head" and crawls in proper direction. But several bugs (starting with two and up) destroy it all. Jquery "each" returns coordinates twice so instead of two sets of coordinates for two bugs FOUR are generated....

Android: Button exists (onCreate has finished) but still has no width/height

android,button,jquery-animate,findviewbyid
The wanted scenario: My app has started and is visible. I press button A and want to display the width of button bMap. In short my not working method: // Is called by button bQuestions' onClick public void QuestionsButton(View v) { Context context = getApplicationContext(); // getting button bMap Button...

jQuery animate does not work while everything else does

jquery,jquery-animate,try-catch
Could anyone could give me a clue on what I can do to debug jQuery in general and/or this issue in particular? Problem : jQuery method animate() behaves strangely. The method is added to the onclick method of a HTML element, javascript generated. This : try{ $(element).animate({ width : '300px'...

How to use .hasClass to toggle position correctly?

jquery,jquery-animate
I have tried to use .toggle to toggle between animations like so, but it didn't work... e.g., $('.login').toggle( function() { $('#panel').animate({ height: "150", padding:"20px 0", backgroundColor:'#000000', opacity:.8 }, 500); }, function() { $('#panel').animate({ height: "0", padding:"0px 0", opacity:.2 }, 500); }); so I switched to using if statements with classes,...

Animate.Scroll html,body after page hits offset - Very close (see Fiddle)

jquery,html,scroll,window,jquery-animate
I'm trying to trigger the window to scroll to a new location after the page has been scrolled down a certain amount. I've got the code working but now I can't scroll back up. Here's a fiddle of the code $(window).scroll(function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 50;...