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...

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...

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...

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...

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...

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...

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,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...

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...

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,...

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...

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")) {...

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...

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...

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...

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...

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...

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,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,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,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....

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...

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)'...

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,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...

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....

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...

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>...

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...

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,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,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...

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,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,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...

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;...

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,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...

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;...

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)...

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},...

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,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...

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...

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,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...

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...

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...

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...

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...

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,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....

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'...

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...

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)") } ...

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:...

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...

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....

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...

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...

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...

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...

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...

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...

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...