I have a function that when run, animates a div on my page and removes a class, what I want to do however is remove the class at the end of the height animation, is this possible with jQuery?
var el = $(this).find('ul li');
var img = $(this).find('ul li img');
$(this).removeClass('active');
//return false;
el.animate({height:'135px'}, 500);
el.css({
'background-position':'top left',
'background-size' : 'auto auto'
});
$(this).find('ul li img').animate({height:'270px'}, 500);
$(this).animate({height:'135px'}, 500);
img.attr('src', function(i, value) {
return value.substring(28);
});
There is a complete function that runs once the animation has completed. According to the jQuery docs for the animate function, you can use it like so:
el.animate({height:'135px'}, 500, function() {
//code to run when complete goes here
});
Use the complete call like this inside the .animate function:
complete: function() { your func u wanna call when ani is complete..; }
Related
I'm refering animate.css from this site http://www.telegraphicsinc.com/2013/07/how-to-use-animate-css/
1- I have click function :
function animationClick(element, animation){
element = $(element);
element.click(
function() {
element.addClass('animated ' + animation);
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
2- I'm called the function here,but I want to change a bit,if i'm clicking the (#container) it will animate and show (.content) below:
$(document).ready(function(){
$('#container').each(function() {
animationClick(this, 'bounce'); // how I modified this line
$('.content').show(); // I want to show and animate bounce for (.content) not (#container)
});
});
I have solved my problem :)
$(function() {
$("#container").click(function() {
$(".content").show();
animate(".content p", 'animated bounceInDown');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
I'm having a bit of a problem with Javascript. I have a list of article titles which, when you click a title, the corresponding article appears on the right hand side (fixed at the top of the page). I have got these articles to fade in/out using Javascript. I also have a function which, when you are scrolled down and click on an article title, scrolls the page slowly back up to the top.
The problem I have is that when the page scrolls up and the article changes at the same time, the animations on both become quite choppy, especially in Safari. Is there any way to make the page scroll to the top first, then make the article change?
I'm basically asking if there is away to make my Javascript functions happen one after the other, rather than at the same time?
Heres my Javascript:
$(document).ready(function () {
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow');
return false;
});
$('.articlelist ul li').click(function() {
var i = $(this).index();
$('.fullarticle').fadeTo(500,0);
$('#article' + (i+1)).fadeTo(500,1);
});
});
Any help would be hugely appreciated!
Thank you
I'm guessing you want to keep the click functionality on your article list and only the elements with class scrollup have 2 animations.
$(document).ready(function () {
$('.articlelist ul li').click(function () {
var i = $(this).index();
if ($(this).is(".scrollup")) {
$("body").animate({
scrollTop: 0
}, 'slow', function () {//when animation completes
fadeArticle(i);
});
} else {
fadeArticle(i);
}
});
function fadeArticle(i) {
$('.fullarticle').fadeTo(500, 0);
$('#article' + (i + 1)).fadeTo(500, 1);
}
});
In your call to animate() you'd want to add a function to be called upon completion. The animate function provided by JQuery takes a function as an optional parameter. When the animation completes that function is called.
You could use something like this:
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow', showArticle);
return false;
});
showArticle would be a call to a function that fades the article in like the anonymous one in your click listener. You would probably need some way to pass an argument about which article should be shown.
I'm relatively new to this, but I think this may work. What I'm trying to do is enclose each of these as a callable function and then pass one function as the callback to the other.
$(document).ready(function () {
scrollTop(showArticle());
});
function scrollTop(callback) {
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow');
callback;
});
}
function showArticle() {
$('.articlelist ul li').click(function () {
var i = $(this).index();
$('.fullarticle').fadeTo(500, 0);
$('#article' + (i + 1)).fadeTo(500, 1);
});
}
How do I get the callback function on the 2nd line to redirect the user after the animation runs? I want it to redirect to the link in the href of 'nav li a'.
If I leave the callback as "" the animation works fine but does nothing (as expected). But if I put anything I think will work it fails and most of the time also breaks the first line from working at all. I'm just trying to get the page to slide in from it's starting offscreen position on load (1st line). Then slide out first then reload the page (2nd line).
$('section').animate({"left":"0px"}, 450);
$('nav li a').click(function () { $('section').animate({ "left": "1000px"}, 1000, "");
return false;
});
Prevent the anchors default action, store a reference to the anchor as the callback for animate() creates a new scope, then just redirect :
$('section').animate({"left":"0px"}, 450);
$('nav li a').on('click', function(e) {
e.preventDefault();
var self = this;
$('section').animate({ "left": "1000px"}, 1000, function() {
window.location.href = self.href;
});
});
If I get your problem correctly, this code is doing what you need:
var $section = $('section');
$section.animate({left: '0px'}, 450);
$('nav li a').click(function(e) {
var self = this;
e.stopPropagation();
e.preventDefault();
$section.animate({left: '1000px'}, 1000, function() {
window.location = self.href;
});
});
Im trying to control the order of my functions in jquery, on click id like an image to fade out, the source of the image to be swapped, and then the new image fade in.
I have the following that sort of works, only it does them all at once, is their a way to prevent this?
// Animate height of div containing information
$(this).animate({
'height' : '600px'
},500, function(){
$('html, body').animate({ scrollTop: $(this).offset().top });
// Fade initial image out
img.fadeOut();
// Switch to hi-red image
img.attr('src', function(i, value) {
return '_includes/images/work/hires/' + value;
});
//Fade Hi res image in
img.fadeIn();
});
fadeOut can take a complete attribute : http://api.jquery.com/fadeOut/
// Animate height of div containing information
$(this).animate({
'height' : '600px'
},500, function(){
$('html, body').animate({ scrollTop: $(this).offset().top });
// Fade initial image out
img.fadeOut(400, function() {
// Switch to hi-red image
img.attr('src', function(i, value) {
return '_includes/images/work/hires/' + value;
});
//Fade Hi res image in
img.fadeIn();
});
});
You should be able to do this with promise()
// Fade initial image out
img.fadeOut();
// Switch to hi-red image
img.promise().done(function() {
$(this).attr('src', function(i, value) { return '_includes/images/work/hires/' + value; });
});
//Fade Hi res image in
img.fadeIn();
Docs: http://api.jquery.com/promise/
You can use the 'queue' functionality of jQuery to queue up function calls.
http://api.jquery.com/queue/
You should use a callback function.
// Fade initial image out
img.fadeOut(duration, function () {
// Switch to hi-red image
img.attr('src', function(i, value) {
return '_includes/images/work/hires/' + value;
});
//Fade Hi res image in
img.fadeIn();
})
This way, once the first image had faded out, jQuery will call the anonymous function you passed as an argument.
Source: http://api.jquery.com/fadeOut/
I have a list of thumbnails. When I click on a thumbnail, I want the image to load after half a second. Here's my code:
$('ul#thumbs li img').click(function() {
setTimeout(function() {
$('img#image').attr("src", $(this).attr("src").replace("_thumb", ""));
}, 500);
});
When I click on one of the thumbs, nothing happens. If I remove the setTimeout function, and just have the image load immediately, it works fine.
Anybody know why the event wouldn't fire?
this isn't what you think it is. When you use setTimeout, this is no longer a reference to the current element when the function gets executed.
You'll need to make sure you are keeping track of the proper element, like so:
$('ul#thumbs li img').click(function() {
var thumbImg = this;
setTimeout(function() {
$('img#image').attr("src", $(thumbImg).attr("src").replace("_thumb", ""));
}, 500);
});
The problem is the scope of this in the timeout function try this:
$('ul#thumbs li img').click(function() {
var self = $(this);
setTimeout(function() {
$('img#image').attr("src", self.attr("src").replace("_thumb", ""));
}, 500);
});
Or even better this:
$('ul#thumbs li img').click(function() {
var src = $(this).attr("src").replace("_thumb", "");
setTimeout(function() {
$('img#image').attr("src", src);
}, 500);
});