I have a page transition which uses jQuery animate. I found that the following code:
$("body").click(false);
is the best way to stop any mouse clicks on the page while the animation is running. But I'm not sure how to undo it! Any ideas?
Try using .unbind()
$("body").unbind("click");
You can check for :animated length on body click.try this:
$('body').click(function () {
if ($(':animated').length) {
return false;
}
});
show me the animation code snippet. You should place $("body").unbind("click"); in the callback of the animation function. When it's done animating, it will unbind the click again.
Related
I am trying to loop a jQuery animation along with the jQuery UI 'explode' effect infinitely until an event stops it. Here is my code:
function movingPicture() {
$('img').delay(2800).animate({right: '44%'}, 3000, movingPicture).effect('explode');
$('img').css('right', '-100px');
$('img').show();
};
movingPicture();
This is supposed to have it loop infinitely according to some research I have done. An img would move left into view onto the document, explode, and then be reset back to the original position. Then, I would like it to perform the same animation infinitely until stopped. What am I doing wrong? Also, what is a way I could stop the loop when an event occurs, like a button is clicked. I am a beginner by the way, so try to keep it as simple as possible. Thanks!
You'd do that like so
function movingPicture() {
$('img').delay(2800).animate({right: '44%'}, 3000, function() {
$(this).effect('explode', function() {
$(this).css('right', '-100px').show();
movingPicture();
});
});
}
movingPicture();
FIDDLE
the fiddle so far:
jsfiddle.net/hYEzV/993/
So I'm looking for a button that can change to the next image or the preview image etc
Im not sure how to go about it tho...
I've created both previous and next button already in the fiddle they just need the function to change to the next or previous image.
Thanks to anyone who can help and explain
thank you.
edit: I'm looking for it to still autoplay like it is doing im just after the ability to flick through the images instead of waiting for the timer if the person didn't want to just sit and wait and watch. I also need the link button in the bottom right to be there as it is.
For the next button I was think this:
$("#Stage_Next_Div_Button").click(function(){
$(function(){
$("#container img").first().appendTo('#container').fadeOut(1000);
$("#container img").first().fadeIn(1000);
});
});
But No idea of how to do the Previous button...
http://jsfiddle.net/hYEzV/998/
I removed the timer and added the click events to the arrow elements.
The test() function was doing the next action correctly, I reverted the images for the prev() function.
The <a> elements are not relevant, you could get rid of them.
I'd not discuss why you decided to write your slider in that some weird way.
This is not the best method to do things like this, but yea... it works.
I sticked to your code and made two functions, next() and prev().
Just bind click event to your buttons and fire next() or prev() function.
$("#Stage_Next_Div_Button").click(function() {
next();
});
$("#Stage_Previous_Div_Button").click(function() {
prev();
});
function prev() {
$("#Link a").last().prependTo('#Link').fadeIn(1000);
$("#Link a").first().next().fadeOut(1000);
$("#container img").last().prependTo('#container').fadeIn(1000);
$("#container img").first().next().fadeOut(1000);
}
function next() {
$("#Link a").first().appendTo('#Link').fadeOut(1000);
$("#Link a").first().fadeIn(1000);
$("#container img").first().appendTo('#container').fadeOut(1000);
$("#container img").first().fadeIn(1000);
}
Updated fiddle: http://jsfiddle.net/hYEzV/995/
Docs:
click - http://jqapi.com/#p=click
prependTo - http://jqapi.com/#p=prependTo
appendTo - http://jqapi.com/#p=appendTo
Here is the working demo.
http://jsfiddle.net/Evqqp/1/
Please check the demo to easily understand the issue. Click on the arrows fast and you will see the view mess up.
I understand it might be because of the 300ms animation i do. What is a clean way to handle the clicks such that it does not mess up the view. I can use a flag to check if the previous click action is complete. But i wanted to seek opinions if there is a better way to do this.
Code where i do the animate
$(".rightArrow").on("click", function () {
if ((Math.abs(parseInt($(".slideBox").css("margin-left"))) + $(".mainDiv").width()) < $(".slideBox").width()) {
$(".slideBox").animate({
"margin-left": parseInt($(".slideBox").css("margin-left")) - $(".mainDiv").width()
}, 300, checkRightArrow);
$(".leftArrow").show();
} else {
$(".rightArrow").hide();
}
});
Thank you
Check if your element is currently animated with the following
if(!$('#myElement').is(':animated'))
{
// Do your animation here
}
Try .stop(true,true)
$(".slideBox").stop(true,true).animate({
Whenever working with animations you should always stop() the previous animation on the element before animating it again.
$(".slideBox").stop(true, true).animate(...
http://jsfiddle.net/Evqqp/4/
You need to add
event.stopPropagation();
after:
$(".rightArrow").on("click", function () {
so:
$(".rightArrow").on("click", function () {
event.stopPropagation();
...
$(document).ready(function() {
$("ul li").click(function() {
$(this).find("p").slideToggle("normal");
return false;
});
});
With this piece of jQuery code I can make elements slide in and out. But the problem is that when someone clicks real fast, the slide out will only go until the max height is reached of the latest reached height.
So, if someone would click real fast the element will only slide out a couple of pixels and slide back up. If they´d than click again to slide it out, it will only slide out to the max height it reached the last time.
Can anybody help me to fix this issue to make this work proper?
PS: The height of the p element is set to auto so it automaticly matches the height of the content inside (maybe this detail will help with your answer).
Instead of using the click function to attach the click event, use one instead:
$("ul li").one("click", doStuff);
function doStuff(){
// do your stuff here
$("ul li").one("click", doStuff); // Re-attach event
}
and then re-attach the event in the function.
Try this:
$(document).ready(function() {
$("ul li").click(function() {
if ( ! $(this).find('p:animated').length)
{
$(this).find("p").slideToggle("normal");
return false;
}
});
});
If you want to actually process the additional clicks (rather than ignore them), then you want to use .stop(true, true) to stop the previous animation and jump it to the conclusion so your next animation can run as you want:
$(document).ready(function() {
$("ul li").click(function() {
$(this).find("p").stop(true, true).slideToggle("normal");
return false;
});
});
Whenever you trigger an animation from a user click, you should know about .stop() and figure out which arguments you want to use with it for a given situation. Without it, the animations can pile up in the queue and run sequentially which is usually not what you want.
Here's the jQuery reference info on .stop() and it's arguments.
I recently tried to use jQuery's effect('scale') function with the hover() function in jQuery. The idea is to enlarge the div element on mouseenter, and shrink it back to normal on mouseleave. The code is as follows:
$('.boxgrid').hover(function(){
$(this).effect('scale', {percent:125}, 1000);
}, function() {
$(this).effect('scale', {percent:80}, 1000);
});
I tried testing this in a jsfiddle, but instead of upscaling and downscaling once when a mouse enters the element, it keeps enlarging it. You can see the jsfiddle here. My question is how do I fix it? My understanding was that the mouseenter event was fired only once, and reset when the mouseleaves event is fired, but this seems to say otherwise? Am I missing something? Any help is greatly appreciated.
It calls the hover function every time the animation finishes. I modified it as follows and it appears to work:
window.boxScaled = false;
$('.boxgrid').hover(function(){
if(!window.boxScaled) {
window.boxScaled = true;
$(this).effect('scale', {percent:125}, 1000);
}
}, function() {
if(window.boxScaled) {
window.boxScaled = false;
$(this).effect('scale', {percent:80}, 1000)
}
});
I think you need to force the animation to stop if you leave the box before it has finished scaling (or reenter the box before it has shrunk):
$('.boxgrid').hover(function(){
$(this).stop().effect('scale', {percent:125}, 1000);
}, function() {
$(this).stop().effect('scale', {percent:80}, 1000);
});
http://jsfiddle.net/magicaj/9GLEy/10/
Your understanding of hover (mouseenter/mouseleave) is correct, they should only fire once upon entering/leaving.