The animate functions does thre times exactly the same thing.
So how can I do this while writing .animate(.. only once?
There should be an easy way but I couldn't figure out.
This is what I've got: see fiddle
$('.button').on('click',function(){
$('header').animate({
'left': '315px'
}, 500, function() {
});
$('main').animate({
'left': '315px'
}, 500, function() {
});
$('footer').animate({
'left': '315px'
}, 500, function() {
});
});
By using comma separated multiple selectors. This way:
$('header,main,footer').animate({
'left': '315px'
}, 500, function() {
});
Working Fiddle
Related
I am using the following functions to grow the text box and display the submit button on focus and shrink and hide the button on blur.
But the button shows and hides before the animation is complete.
I am looking to create a neat slide down and slide up animation.
$('#venue-write-review').focus(function() {
$(this).animate({ height: '96px' }, 500);
$('#submit-review').show();
});
$('#venue-write-review').blur(function() {
$(this).animate({ height: '48px' }, 500);
$('#submit-review').hide();
});
You can specify a callback to the animate function to be executed once the animation is done.
$('#venue-write-review')
.focus(function() {
$(this).animate({ height: '96px' }, 500, function () {
$('#submit-review').show();
});
})
.blur(function() {
$(this).animate({ height: '48px' }, 500, function () {
$('#submit-review').hide();
});
});
This is all you need And don't forget to use .stop()!
$('#venue-write-review').on('focus blur',function(e){
$(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){
$('#submit-review').toggle();
});
});
e.type[0]=="f" ij just to check in a Conditional Operator (?:) if the passed event's first [0] character is f (focus; else logically it's blur)
Read the jQuery docs about the methods: .on(), .toggle(), stop() .animate() callback and on the MDN website read about Conditional operator
Also in jQuery if you don't need to animate by % or some other measure, you don't need to specify 'px' cause it's default.
You can use complete callback. Check the docs (under options section):
A function to call once the animation is complete.
Like this:
$('#venue-write-review').focus(function() {
$(this).animate({
height: '96px'
},
{
duration: 500,
complete: function() {
$('#submit-review').show();
}
}
});
});
$('#venue-write-review').blur(function() {
$(this).animate({
height: '48px'
},
{
duration: 500,
complete: function() {
$('#submit-review').hide();
}
}
});
});
I used the following javascript:
$('.slide-content #show-effect-1').hover(function(){
$(this).next().stop(true, true).fadeIn({ duration: _duration, queue: false }).css('display', 'none').show('slide', { direction: "down" }, _duration);
},
function() {
$(this).next().stop(true, true).fadeOut({ duration: _duration, queue: false }).hide('slide', { direction: "down" }, _duration);
});
What should happen is:
mouseenter the button --> content show
mouseout the button --> content hide
Question: when mouseout on the button is faster than the effect time of mouseenter, the content will be hidden and not displayed when mousenter the button again.
How do I prevent this happening?
Instead of using separate funcitons for the fadeIn and slide effect I decided to implement both in a single animate() function, then I just added some CSS resets to make sure the element is ready before starting the animation:
$(document).ready(function () {
var _duration = 1000;
$('#show-effect-1').hover(function () {
var $next = $('.text-banner');
$next.show();
$next.stop(true, true).css({
'margin-left': $next.outerWidth() * -1,
'margin-top': 0,
'opacity': 0,
'display': 'block'
}).animate({
'margin-left': 0,
'opacity': 1
}, _duration);
}, function () {
var $next = $('.text-banner');
$next.stop(true, true).animate({
'margin-top': $next.height() * -1,
'opacity': 0
}, _duration, function () {
$(this).hide();
});
});
});
Check the Updated fiddle
Note that I had to add a container to accurately reproduce the slide effect, you can test without it and see if it's something you actually need
I am able to move button to left side but after that how i can again move it to right side.
Can i also use delay here.
Here is the code that i have tried:
$(document).ready(function () {
example_animate(10);
});
function example_animate(px) {
$('#Button1').animate({
'marginLeft': px
});
}
you can use this, it is working perfectly for me, it will continuously move your element back and forth, and you can also vary animation speed.
function animatethis(targetElement, speed) {
$(targetElement).animate({ marginLeft: "+=10px" },
{
duration: speed,
complete: function () {
targetElement.animate({ marginLeft: "-=10px" },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
)};
}
use this to implement:
animatethis($('#controlid'), 1500);
Cannot answer properly without looking at your HTML and CSS but what you are doing is right. Simply call your example_animate() with a negative value
i.e.
example_animate(-10);
Or if you want to bring it to the original value (assuming originally it had 0 margin)
example_animate(0);
Note: This is probably not the best way to animate
Yes, the animate function takes a function that is called after the animation is complete. So you can do:
$(document).ready(function () {
example_animate(100);
});
function example_animate(px) {
$('#Button1').animate({
'marginLeft': px
}, function(){
$('#Button1').animate({
'marginLeft': 1
});
});
}
http://jsbin.com/ixajol/1/edit
Do execly the same only to the right, Its not that hard if you can make it go left.
Maybe
var button_init_marginLeft;
$(document).ready(function () {
button_init_marginLeft = $('#Button1').css("marginLeft");
example_animate(10, true);
example_animate(null, false);
});
function example_animate(px, to_left) {
if (to_left)
{
$('#Button1').animate({
'marginLeft': px
});
}
else
{
$('#Button1').animate({
'marginLeft': button_init_marginLeft
});
}
}
?
Why will this code not work as an onclick ?
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
}, function() {
$(this).animate({
height: '100px'
}, 800);
});
If you're trying to first expand the element and then contract it, it should probably be something like this:
$('.mainz11').click(function() {
// determine target heights
if ($(this).hasClass("expanded")) {
var targetHeight = 100;
} else {
var targetHeight = 280;
}
// animate
$(this).animate({
height: targetHeight
}, {
duration: 800,
complete: function() { $(this).toggleClass("expanded"); }
});
});
This could use some cleaning up, but it does the trick, and you can track expanded items easily this way.
See here: http://jsfiddle.net/mpQek/3/
The click function takes only a single function but you are passing 2 functions to it. You can try it this way:
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
});
If you want to chain animations, put the next animation as the function to run on complete of the first animation:
http://api.jquery.com/animate/
$('.mainz11').click (function() {
$(this).animate({ height: '280px', 800,
function() { $('.mainz11').animate({ height: '100px'}, 800)
);
});
I am trying to make this animation loop
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
duration: 200,
easing: 'easeInCubic',
});
}
});
})
});
<div class="example">
<h4>Bounce</h4>
<div class="jquery_bounce bounce">
<img src="images/bounceimg.png" class="bounceimg" />
</div>
</div>
Please help.
try this~
$(function(){
$.extend({
show:function(){
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
}
});
})
}
});
setInterval("$.show()",1000);
});
Demo:
http://jsfiddle.net/VpKw2/
Why don't you use setInterval()?
Edit:
Your animation bounces once, then stops, because...
You trigger the margin=20 part.
Upon completeness, another animation is scheduled: margin=0.
That's it. It doesn't loop because nothing is rescheduled to happen after the first pass.
Read the documentation on setInterval(): it's a function that let's you call another function at fixed (in milliseconds) intervals.
If you still want to do it as above, you must fix the problem I pointed out. Try thinking your way around it, and I'll help if you can't figure it out :).
Cheers.
Setup a bounce function that will continue the animation, either moving the element left or right:
function bounce(elm, leftZero) {
var px = leftZero ? '0px' : '20px';
elm.animate({ marginLeft : px}, {
duration: 200,
complete:function(){
//Continue bouncing
setTimeout(function(){
bounce(elm, !left);
},1);
}
});
}
$(".jquery_bounce").ready(function(){
$("img", this).each(function(){
//Start bouncing
bounce($(this), false);
});
})
});