I am using the following code to animate the disappearing of a textarea once the control is out of focus and the textarea is empty.
$(this).blur(function ()
{
var value = $(this).val().trim();
if (value == "")
{
// empty; make it disappear
$(this).animate({
width: 0,
height: 0
}, 1000,'linear',
function ()
{$(this).parent().css("display", "none")});
}
});
The box disappears without animation. But if i run the following code the animation is still there:
$(this).blur(function ()
{
var value = $(this).val().trim();
if (value == "")
{
// empty; make it disappear
$(this).animate({
width: 0,
height: 0
}, 1000);
}
});
I am not sure why the display:none code is executing before the completion of the animation.
JSFiddle: https://jsfiddle.net/7pbuxtkz/
Give this a try. It utilizes the promise() and done() instead of using it directly from the callback itself. Although your original code works for me, it's worth trying. Promise() will ensure that all of the animations are done.
$('.notesArea').each(function () {
$(this).blur(function () {
var value = $(this).val().trim();
if (value == "") {
// empty; make it disappear
$(this).animate({
width: 0,
height: 0
}, 1000).promise().done(function () {
$(this).parent().css("visibility", "hidden")
});
}
});
});
Let me know how it goes and we'll go from there. As I mentioned before, if this doesn't work, then I feel it's something taking place from your CSS. If that's the case, I'll poke around and see what I can find out for you.
More information on promise(): https://api.jquery.com/promise/
I know you said you're using multiple CSS files, which is why you didn't post it here. I would go through those CSS files and see if there is anything that's setting the transition-duration on it to something lower than what you're setting your animation's duration to.
Related
Thank for the recomendations, I have updated my ask.
I have the next code:
https://jsfiddle.net/btq7mm0h/3/
Is a simply counter starts when the document is ready. I would like that it will start when the div id="testimonios" is visible on screen because when I do scroll to down for to see the effect is already can't see.
What I have made, I find several plugin js like
https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery
Add script in my document and modified the code:
if $('#testimonios').visible( true ) {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 9000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
Please any suggestion.
There's a few ways to go about this such as using a timer, pure javascript and jquery has a few variations. Here's one way to go about this.
$("#testimonios").bind("DOMSubtreeModified", function() {
// do whatever here, you can even add an if statement for css such as
var cssCheck = $(this).css('display');
if (cssCheck == "block") {
// Div Display is Visible
alert("isVisible");
} else {
// Div Display is not Visible
alert("isNotVisible");
}
});
You can see the result at codebin: http://codebins.com/bin/4ldqoyk
What I want: I created a sort of image gallery with a thumbnail slider and I want the thumbnails to scroll when a nav button is clicked but if the button is pushed again before the animation is completed it doesn't keep adding to the que, it clears the que and only completes the current animation.
What my problem is: When the button is clicked it puts the click animation in a que and completes all the clicks in order. Maybe someone can help we word this better.
What I have tried: I have tried adding .finish() and .stop(true, true) to my js file but I can't seem to get it working right. I'm probably putting it in the wrong spot or even using the wrong thing, I don't know and so I need some help.
Here is a functioning jsfiddle: http://jsfiddle.net/ma9j6o09/2/
Some of it is not working since my images are locally hosted but the slider part for the thumbnails is.
This is my function for animating the movement; what do I add to get the effect I need?
var clicks = 0;
$("#right").click(function() {
if ( clicks < 5 ) {
clicks++;
$("#thumbContainer").animate({
left: "-=128px"
}, 500, function() {
// Animation complete.
});
}
});
$("#left").click(function() {
if (clicks > 0) {
clicks--;
$("#thumbContainer").animate({
left: "+=128px"
}, 500, function() {
// Animation complete.
});
}
});
Try this out: http://jsfiddle.net/ma9j6o09/3/
In response to your question about .stop() you would use it like this:
$("#thumbContainer").stop(true, true).animate({
left: "+=128px"
}, 500, function() {
// Animation complete.
});
});
But this will indeed not achieve what you want as it means it will stop the animation and jump to the last frame straight away so you lose the animation you wanted.
Instead use the flag I used in the fiddle which makes it impossible to even try animate whilst an animation is in progress.
var clicks = 0,
animating = false;
$("#right").click(function() {
// Only animate if we are not already animating
if ( clicks < 5 && !animating ) {
animating = true;
clicks++;
$("#thumbContainer").animate({
left: "-=128px"
}, 500, function() {
animating = false; // No longer animating
// Animation complete.
});
}
});
$("#left").click(function() {
// Only animate if we are not already animating
if (clicks > 0 && !animating) {
animating = true;
clicks--;
$("#thumbContainer").animate({
left: "+=128px"
}, 500, function() {
animating = false; // No longer animating
// Animation complete.
});
}
});
I have this code which animates between divs sliding out. If an item is clicked, it's relevant content slides out. If another item is clicked, the current content slides back in and the new content slides out.
However,
var lastClicked = null;
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
for (var i=0; i<animateClasses.length; i++) {
(function(animCls) {
$('.each-brew.'+animCls).toggle(function() {
if (lastClicked && lastClicked != this) {
// animate it back
$(lastClicked).trigger('click');
}
lastClicked = this;
$('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000).css('position','inherit');
}, function() {
$('.each-brew-content.'+animCls)
.animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()}) // hide the element in the animation on-complete callback
.css('position','relative');
});
})(animateClasses[i]); // self calling anonymous function
}
However, the content sliding out once the already open content slides back is sliding out too quickly - it needs to wait until the content has fully slided back in before it slides out. Is this possible?
Here's a link to what I'm currently working on to get an idea (http://goo.gl/s8Tl6).
Cheers in advance,
R
Here's my take on it as a drop-in replacement with no markup changes. You want one of three things to happen when a menu item is clicked:
if the clicked item is currently showing, hide it
if something else is showing, hide it, then show the current item's content
if nothing is showing, show the current item's content
var lastClicked = null;
// here lastClicked points to the currently visible content
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
for (var i=0; i<animateClasses.length; i++) {
(function(animCls) {
$('.each-brew.'+animCls).click(function(event){
if(lastClicked && lastClicked == animCls){
// if the lastClicked is `this` then just hide the content
$('.each-brew-content.'+animCls).animate(
{ left: '-33.3333%' }, 1000,
function() {
$(this).hide();
}).css('position','relative');
lastClicked = null;
}else{
if(lastClicked){
// if something else is lastClicked, hide it,
//then trigger a click on the new target
$('.each-brew-content.'+lastClicked).animate(
{ left: '-33.3333%' }, 1000,
function() {
$(this).hide();
$(event.target).trigger('click');
}).css('position','relative');
lastClicked = null;
}else{
// if there is no currently visible div,
// show our content
$('.each-brew-content.'+animCls).show()
.animate({ left: '0' }, 1000)
.css('position','relative');
lastClicked = animCls;
}
}
});
})(animateClasses[i]); // self calling anonymous function
}
Well, I'm pretty sure there are other more easy possibilities and I didn't have much time but here is a working jsfiddle: http://jsfiddle.net/uaNKz/
Basicly you use the callback function to wait until the animation is complete. In this special case it's the complete: function(){...}
$("document").ready(function(){
$('#ale').click(function(){
if ($('div').hasClass('toggled')){
$('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
$('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
}).removeClass('toggled');
}else{
$('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
}
});
$('#bramling').click(function(){
if ($('div').hasClass('toggled')){
$('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){
$('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');}
}).removeClass('toggled');
}else{
$('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');
}
});
});
I give a toggled class if a div is expanded. Since the animation on your page seems to be pretty much broken I think this would be a better way to do this. But remember: my code isn't really good. Just fast and it can be refactored. It's working tho..
Rather than using toggles, bind an on "click" handler to your ".each-brew" divs. In the handler, first hide content divs and then show the appropriate content when that animation completes. You can do that with either a promise or a callback. Something like this...
$(".each-brew").on("click", function (event) {
$(".each-brew-content").show().animate({ left: "0" }, 1000, function() {
// Get the brew name from the class list.
// This assumes that the brew is the second class in the list, as in your markup.
var brew = event.currentTarget.className.split(/\s+/)[1];
$(".each-brew-content." + brew).animate({ left: "-33.3333%" }, 1000, function() { $(this).hide(); });
});
});
I think an event and observer would do the trick for you.
set up the callback function on completion of your animation to fire an event.
the listener would first listen for any animation event and after that event is triggered listen for the completion event. when the completion event is fired execute the initial animation event.run method (or whatever you would want to call it)
Within the listener
on newanimationeventtriger(new_anim) wait for x seconds (to eliminate infinite loop poss) while if this lastevent triggers done == true{
new_anim.run();
}
I have a really simple jQuery script which when an input element is focused on, it expands its width to 250px (using the focusin() event), and when the focus is lost, it shrinks back to 200px using the focusout() event. But I'm not sure I'm using the most syntactically efficient code for what I'm trying to achieve. Here is my current code:
$(document).ready(function() {
$('input').focus(function() {
$(this).animate({
width: "250px"
}, 500);
});
$('input').focusout(function() {
$(this).animate({
width: "200px"
}, 500);
});
});
To me however, this seems unnecessarily bulky. I've tried googling around, but I can't get the keywords right to find any results which help me. Surely there is a much simpler method to achieve such an effect, like a toggle? How would I achieve this?
I see nothing wrong with what you've done. If you feel you're repeating yourself too much, you might pull out some logic into a animateWidth function:
$(document).ready(function() {
function animateWidth(element, width) {
element.animate({ width: width }, 500);
}
$('input').focus(function () { animateWidth($(this), '250px'); })
.focusout(function () { animateWidth($(this), '200px'); });
});
I have this function, that adds 31px to my style bottom on ul.
It works fine, but if I click fast, it no longer adds 31px, but some weird number like 17.423px. I guess it's because the animation isn't done, and thereby by clicking fast it adds 31px to the current px amount. My thought is that I need to insert a stop(). But where?
$(function () {
$('.topTenTwocolumns .topTenTwocolumnsWrap .down').click(function () {
if ($("ul").css("bottom") !== '2728px') {
$(this).parents('.topTenTwocolumnsWrap').children('ul').stop().animate({
bottom: '+=31'
}, 200);
}
});
});
The animations are queued, but it might be that the values to animate are calculated before the animation is queued, and as you are using a relative value it would calculate the animation from it current position.
You already have a stop call in the code. I don't know if you added that afterwards, otherwise that could also explain the values. If you stop the animation halfways, the bottom value will naturally be changed halfways.
You could keep the current target value in a variable so that you can specify an absolute value for the animation:
$(function () {
var current = 0;
$('.topTenTwocolumns .topTenTwocolumnsWrap .down').click(function () {
if (current < 2728) {
current += 31;
$(this).parents('.topTenTwocolumnsWrap').children('ul').stop().animate({
bottom: current + 'px'
}, 200);
}
});
});
This way you can keep the stop call so that the new animation replaces the previous instead of being queued.
I would probably try to prevent the function from firing if one is already in flight. Something like this might work:
$(function () {
$('.topTenTwocolumns .topTenTwocolumnsWrap .down').click(function () {
if ($(this).data('in_flight') === true){
return false;
} else {
if ($("ul").css("bottom") !== '2728px') {
$(this).data('in_flight', true);
$(this).parents('.topTenTwocolumnsWrap').children('ul').stop().animate({
bottom: '+=31'
}, 200);
$(this).data('in_flight', false);
}
}
});
});
A more complicated approach would be to count the clicks and queue them (triggering the next one after the current running function completes). You could use similar code to do this.