I want to have a div that animates the currently active image out of the view and instead animates in another image. There are several of these divs, and each one should have the same basic functionality but linked to different images. The problem I'm having is that you can click many of the divs before the animation is complete, which fires the other animations at the same time. My goal is to only be able to fire one animation at a time, and when the animation finishes you're able to fire the next animation. I've tried using unbind which works OK but then I'd have to rebind it later and I don't know how to do this. I'm really a jQuery noob so I would greatly apreciate an answer. Thanks!
My code:
$('.div1').click(function clickevent() {
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500, function() {
$('.div2, .div3').bind('click', clickevent); /* Here I want to rebind the function */
});
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
$('div2, .div3').unbind('click', clickevent);
});
I have two other codeblocks for .div2 and .div3 which look the same but with different classes in different places. Is there any way to make the images finish their animation before being able to animate again? Thanks.
Is this what you need:
var canAnimate = true;
$('.div1').click(function clickevent() {
// these 4 lines have to be in all code blocks (ie. for .div2 and .div3)
if (! canAnimate) {
return;
}
canAnimate = false;
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500, function() {
canAnimate = true; // this should also be included for .div2 and .div3 code blocks
});
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
});
I think queue() will append the animations but not stop them, so if you click 10 times on the images, the click handler will animate it 10 times but one after another. I guess you want only animate the images when no image is currenty animated so you can use:
$('.div1').click(function clickevent() {
// When no image is currently animated then perform the animation
if($j('.img1, .img2, .img3').is(':animated') == false)
{
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500);
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
} else {
// There is currently an animation runnig, do nothing
}
});
See this for more information: http://api.jquery.com/animated-selector/
You should also get some information about caching of selection results.
Related
I have this semi-slider-style UI where new terms are added in from the left: http://jsfiddle.net/v4v5cvkz/. I'm using the jQuery prependTo function to do this. My issue is that I want the terms that are already displayed to perform an animated slide to the right when a new term gets added, rather than suddenly "appear" in the correct position. I did try adding a "displayed" class to terms that had successfully shown up, and tried adding a slide-to-right animation after that, but that didn't quite achieve the effect I was going for (the "displayed" objects were moved much further to the right than I expected).
Here is the problematic code (you'll probably want to view the fiddle to see it in context though):
function addToStream(term, delay) {
setTimeout(function(){
$("<div />")
.addClass("stream_term")
.html(term)
.css({
opacity: 0
})
.prependTo("#stream_terms")
.animate({opacity:1},
{ duration: 1000,
complete: function() {
$(this).addClass("displayed");
}
});
}, delay);
}
Any help here would be greatly appreciated. Thank-you!
*Note: I have access to jQuery UI in my code, though it isn't linked in the fiddle. Also, if anyone knows of a plugin that can do this sort of thing better than I can, please let me know. The closest one I was able to find was Fraction Slider, but I didn't find it obvious how to create a similar UI with it (it might also be overkill for my purposes).
Here's a way to do it:
function addToStream(term, delay) {
setTimeout(function(){
var newDiv = $("<div />");
newDiv.addClass("stream_term")
.html(term)
.css({
opacity: 0,
display: 'none'
}).prependTo("#stream_terms");
var width = newDiv.width();
var height = newDiv.height();
newDiv.css({
width: 0,
height: height,
display: 'inline-block'
})
.animate({
width: width,
margin: '0 10px',
padding: '5px 10px'
}, 1000)
.animate({opacity: 1}, 1000, function(){
$(this).addClass("displayed");
});
}, delay);
}
It also needs the following CSS changes:
.stream_term {
padding: 0;
margin: 0;
overflow: hidden;
}
DEMO: http://jsfiddle.net/StathisG/hqg29p6r/1/
So, I'm sure there is a simple answer to this, but after 2 days of research I cannot find a solution.
The Story:
I have a dynamic page. When you get to one section and click on one of the 6 options it pulls up some info (name, place, etc.). I have a jQuery function that makes that info hide about half way after a few seconds. When you hover over that section with the mouse it also will animate up and back down as the mouse leaves it.
The Problem:
How do I make the whole function run again if another of those 6 option is clicked? Each time an option is selected the class with that info comes up, but after this function runs once (the delay part and animate down part) it just stays minimized unless you hover over it. I want it to appear every time and then run through the function. I have tried a number of things, and I'm sure there is a simple solution, just not sure what it is.
Here is a link to my codepen with a sample: http://codepen.io/jsegarra/pen/GxByr
I have also tried to wrap that all in a click function, for clicking on one of those 6 options and thought that would do the trick, but still the same thing:
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').delay(5000).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});
Just reset the div css before re-running the function
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').css('height', '100px').delay(500).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});
Here is the html I used with that javascript
<div class="title">title</div>
<div class="bottomTab">This is going to move from just being about 50 pixels high to about 100 pixels high after i add in some mouseenter and mouse out events</div>
I used the same CSS of your code pen, and the result was a full reclickable option
I don't see the problem. Your code seems to works fine. You've just typed an error while transfering to CodePen. Replace $('this').hover( with $('.bottomTab').hover(.
I'm trying to apply a CSS transition to an element, but at some point before it completes, remove the transition entirely and start another one.
This question answers how to stop a transition in its tracks, but I modified the jsFiddle there to illustrate the issue:
http://jsfiddle.net/zXVLd/
var $div = $('div');
$div.click(function(){
$div.css({
left: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
What I want to happen is for the box to reset its position and move down when clicked, and for the completed handler on the first transition to not fire.
What does happen is the box resets its position when clicked, but doesn't move down until the first transition completes (even though the motion from the first transition is no longer happening). The completed handler still fires on the first transition as well.
I've updated your fiddle with the clearQueue method: http://jsfiddle.net/zXVLd/1/
var $div = $('div');
$div.click(function(){
$div.clearQueue().css('left', $div.css('left')).transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
That does the trick. See http://api.jquery.com/clearQueue/ for more information on the clearQueue method.
To do this kind of animations, you can try to use GSAP's TweenLite. It's incredible what you can achieve with it. http://www.greensock.com/jump-start-js/ If you include this on your page and add the following code:
div.bind('click', function(e) {
// note that you can animate two directions, from and to
TweenLite.from(div /*element*/, 0.2 /*easing in seconds*/, {
// the css, but for positioning elements you can also use x and y.
x: 600,
easing: linear,
onStart: function() {
Stuff you want to do before the animation
},
onComplete: function() {
Stuff you want to do after animationg
}
});
});
The plugin which you use is using queue. So, it is just enough to call $div.dequeue(); I.e.
var $div = $('div');
$div.click(function(){
$div.dequeue();
$div.css({
left: 0,
top: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
fiddle -> http://jsfiddle.net/krasimir/zXVLd/2/
I have a navigation bar that sticks out a little bit from the right edge of the screen. I want it so when you hover on the div, it slides left 550px out of the right side of the browser. I'm using jquery's animate function and I got it to animate properly when hovered, but I can't get it to slide back to the right when you stop hovering on it.
I'm very new to javascript/jquery and I feel like I'm missing something simple...
$(document).ready(function(){
$("#nav").hover(function() {
$(this).animate({
right: "0px",
}, 800 );
(function() {
$(this).animate({
right: "-550px",
}, 800 );
});
});
});
And here's #nav's css:
#nav {
position: absolute;
right: -550px;
min-width: 300px;
top: 10px;
height: 50px;
background-color: #B30431;
}
The code has some syntax errors. The code should be :
$(document).ready(function(){
$("#nav").hover(
function() {
$(this).animate({ right: "0px" }, 800 );
},
function() {
$(this).animate({ right: "-550px" }, 800);
}
});
});
Good Luck !!
You have made your hover function complicated, you have wrapped the function with () and your function is not executed.
$(document).ready(function() {
$("#nav").hover(function() {
$(this).animate({ right: "0px" }, 800);
}, function() {
$(this).animate({ right: "-550px" }, 800);
});
});
One option, which we use a lot for our animation, is to make a css class that contains that animation, and then ise the .addClass() method to trigger the animation. Its fast, and its browser compatible. You could also use pure css for this.
You could try this...Demo
$(document).ready(function(){
$("#nav").mouseover(function(){
$(this).delay(200).animate({right: "0px"}, 800 );
// Added a 200ms delay to prevent quick accidental mouse overs triggering animation.
});
$("#nav").mouseout(function(){
$(this).clearQueue();
// Gives the user the ability to cancel the animation by moving the mouse away
$(this).animate({right: "-550px"}, 800 );
});
});
Here's my code: http://jsfiddle.net/ZspZT/
As you can see from the example, the fourth div block is flickering pretty badly, particularly on the hover-over effect, but also occasionally with the other divs as well.
Thanks in advance!
It appears that the easing function built into .animate is causing your percentage widths to add up to greater than 100%, causing the last sub-DIV to disappear. There are a few ways to solve this.
When I replace your percentage widths with fixed numerical widths, the problem vanishes. I used this in the code below (and your code had a LOT of redundancy to reduce):
$('document').ready(function() {
var speed = 450;
$('.four-ways-slide').hover(function() {
$(this).stop().animate({
width: 425
}, speed).siblings().stop().animate({
width: 25
}, speed);
}, function() {
$(this).siblings().andSelf().stop().animate({
width: 125
}, speed);
});
});
http://jsfiddle.net/mblase75/ZspZT/10/
Another possibility is to use percent widths that add up to 99% instead of 100%, and set a background color on the container DIV to hide the gap. Adding linear easing to the .animate method helps keep the total width from exceeding 100%:
$('document').ready(function() {
var speed = 450;
$('.four-ways-slide').hover(function() {
$(this).stop().animate({
width: '75%'
}, speed, 'linear').siblings().stop().animate({
width: '8%'
}, speed, 'linear');
}, function() {
$(this).siblings().andSelf().stop().animate({
width: '24.5%'
}, speed, 'linear');
});
});
#four-ways-slide-4,#four-ways-slider{background:#999999;}
http://jsfiddle.net/mblase75/ZspZT/9/
try using 'mouseenter' and 'mouseleave' rather than 'hover'. also you should assign variables rather than repeating divs
var one = $('#four-ways-slide-1');
var two = $('#four-ways-slide-2');
var three = $('#four-ways-slide-3');
var four = $('#four-ways-slide-4');
var all = $('.four-ways-slide');
thisIn = function(){
all.animate({width:'8%'},{duration: 450,queue:false});
};
thisOut = function(){
all.animate({width:'25%'},{duration: 450,queue:false});
};
one.mouseenter(function(){
thisIn();
$(this).animate({width:'76%'},{duration: 450,queue:false});
one.mouseleave(function(){
thisOut();
$(this).animate({width:'25%'},{duration: 450,queue:false});
});
});