I am trying to have jQuery animate function only last for a couple seconds and the revert back to the original item.
<button id="clickMe"> Click </button>
<div id="target"> Target </div>
and the Jquery:
$(document).ready(function(){
$('#clickMe').click(function(){
$('#target').animate({opacity: 0.1}, 'slow');
});
});
How would I make this effect only last for say two seconds? Thanks
This help you :
<script>
$(document).ready(function(){
$('#clickMe').click(function(){
$('#target').animate({opacity: 0.1}, 2000).animate({opacity: 1});
});
});
</script>
You can do it by setting a time duration like this :
$(document).ready(function() {
$('#clickMe').click(function() {
$('#target').animate({
opacity: 0.1
}, 2000, function() {
$('#target').animate({
opacity: 1
})
});
});
});
Here is the jsFiddle
Hope it helps :)
you can use duration and complete options of animate
$('#clickMe').click(function(){
$('#target').animate(
{opacity: 0.1},
{
duration: 2000,complete: function(){
$('#target').css("opacity", 1);
}});
});
plunker : http://plnkr.co/edit/d3135325X3R9QkzZjdbz?p=preview
This help you:
$( "#target" ).animate({ opacity: 0.1 }, 2000, function() {
// Revert back.
});
Related
Very shortly after my animation starts, it goes out of sync.
The divs are supposed to fade in and fade out after one another.
Please take a look at my code below...
Thanks
(document).ready(function(){
animate_loop = function animate_loop(){
$( "#w01" ).animate({ opacity: 0.4, }, 1000,
function(){ $( "#w01").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w02" ).animate({ opacity: 0.4, }, 1500,
function(){ $( "#w02").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w03" ).animate({ opacity: 0.4, }, 2000,
function(){ $( "#w03").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w04" ).animate({ opacity: 0.4, }, 2500,
function(){ $( "#w04").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
});
If you want more control use the code below. I highly recommend using adding a class and then animating trough CSS instead of making a jquery loop.
Here's a new demo: http://jsfiddle.net/mirohristov/gw8kskom/1/
$(document).ready(function(){
$('#w01').delay(1000).queue(function(){
$(this).addClass("go");
});
$('#w02').delay(1500).queue(function(){
$(this).addClass("go");
});
$('#w03').delay(2000).queue(function(){
$(this).addClass("go");
});
$('#w04').delay(2500).queue(function(){
$(this).addClass("go");
});
});
If you are trying to just make a fade effect, use css and add a class at a different time with setInterval. Use .each(index, el) to iterrate trough each element. Index will be 1, 2, 3, 4, etc... so use that to delay your animation.
Here's a demo: http://jsfiddle.net/mirohristov/gw8kskom/
$(document).ready(function(){
$('.child').each(function(index, el){
setTimeout(function(){
$(el).addClass('go');
}, 200*index);
});
});
I have two div when I click button to close the div. second div moves upward I just want to do this slowly. I try to use transition effect but cant do it any help? thanks in advance.
fiddle
http://jsfiddle.net/ssZXA/185/
read the documentation about .hide()
the first argument is "duration"
You can use $("#notice").hide('slow');
use fadeOut
$( "#closebutton" ).click(function(event)
{
$("#notice").fadeOut('slow'); //OR fadeOut('10000') time is in milliseconds
});
Jsfiddle
Use
$("#notice").slideToggle();
or
$("#notice").fadeOut();
In Place of
$("#notice").hide();
Plz try this:
$("#notice").hide("slow");
Thanks.
Just apply slow on hide function and I customized your code as follows:
$("#closebutton").button({
icons: {
primary: "ui-icon-close"
},
text: false
}).click(function(event) {
$("#notice").hide("slow");
});
Refer LIVE DEMO
Just do this:
$("#notice").hide('fade');
or
$("#notice").hide('slideUp');
instead of $("#notice").hide();
Demo
$("#notice").hide('fade','slow');
DEMO
or
$("#notice").hide('fade',5000);
5000- indicates it will take 5seconds to hide. you can give any value.
Syntax:
$("selector").hide('type',time);
Try with this.
<body>
<div id="myDiv" style="width:200px;height:150px;background-color:red;">
This is the div that will fade out, slide up, then be removed from the DOM.
</div>
<input id="myButton" type="button" value="Fade" />
</body>
$(function() {
$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});
});
});
Demo
$(function(){
$(this).html('«');
$('.slider-arrow').click(function(){
var x = $(".slider-arrow").offset();
if (x.left == "308")
{
$( ".slider-arrow, .panel").animate({left: "-=300"}, 700);
}
else
{
$( ".slider-arrow, .panel").animate({left: "+=300"}, 700);
}
});
});
Is it possible to animate a DIVs background-position-x using jQuery animate?
Ideally, the background-position-x will increment 20% when clicked.
Here is my code so far:
$('.cycle').click(function() {
$(this).animate({ 'background-position-x': '+20%' }, 500, 'linear');
});
But it only works for the first click.
Thanks!
Try this
$('.cycle').on('click', function() {
$(this).animate({ 'background-position-x': '+=20%' }, 500, 'linear');
});
use something like this:
$(function() {
$('.element').css("backgroundPosition","0px 0px").animate({"backgroundPosition":"-200px 10px"});
});
I am using jQuery to slide something down and fade something else out, but in testing it, I've noticed that the fading appears too long after the sliding happens.
In other words, there is enough of a lag that it is noticeable.
Just to make myself clear, these two items which I am sliding one and fading the other are different elements and I can not use chaining.
Is there any way to get these functions to run at the same time or closer together so that they appear they are running at the same time ?
Here is the jQuery code that I am using:
$(document).ready(function(){
$('#trigger').click( function(){
$(this).animate({ opacity: 0.0 }); // fade
$('#carousel').animate({ top: '100px' }); // slide
$('#pullrefresh').css('top', '-490px'); // line 5
$('#detector').hide(); // line 6
});
});
The fade and the slide are happening at different times, line 5 and the slide seem to be occurring at the same time.
They should run together if you do it like:
$('#element1').animate({
opacity: 0.25,
}, 1000, function() {
// complete
});
$('#element2').animate({
opacity: 0,
}, 1000, function() {
// complete
});
try this
$(document).ready(function(){
$('#trigger').click( function(){
$(this).animate({ opacity: 0.0 },1000); // fade
$('#carousel').animate({ top: '100px' }); // slide
$('#pullrefresh').css('top', '-490px'); // line 5
$('#detector').hide(); // line 6
});
});
specify the time 1000 for animate
$(document).ready(function(){
$('#trigger').click( function(){
$.Deferred(function(dfr) {
dfr.pipe(function() {
return $(this).animate({ opacity: 0.0 }); // fade
}).
pipe(function() {
return $('#carousel').animate({ top: '100px' }); // slide
})
pipe(function() {
return $('#pullrefresh').css('top', '-490px'); // line 5
}).
pipe(function() {
return $('#detector').hide(); // line 6
});
}).resolve();
});
});
It'd be nicer if you set up a fiddle.
If your DOM is large, you can minimally reduce the delay by doing the lookup ahead of time:
$(document).ready(function(){
$('#trigger').click( function(){
var vars = { $this : $(this),
$carousel : $('#carousel'),
$pullrefresh : $('#pullrefresh'),
$detector : $('#detector')
};
vars.$this.animate({ opacity: 0.0 },1000); // fade
vars.$carousel.animate({ top: '100px' }); // slide
vars.$pullrefresh.css('top', '-490px'); // line 5
vars.$detector.hide(); // line 6
});
});
I have the following Javascript to make a text link glow/pulsate continuously. This link reveals another section of the same page so I would like it to stop once the user has clicked on it.
<script type="text/javascript">
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({opacity: 0.2}, 1200, 'linear')
.animate({opacity: 1}, 1200, 'linear', pulsate);
}
pulsate();
});
</script>
So basically, I just need to know what I need to add here so that the effect stops once it has been clicked.
If the same link is clicked again, the revealed section of the page will hide - is it too much trouble to make the effect start again after a second click?
I look forward to an answer from you good people.
Scott.
Simply bind to the click event and call stop(). You should also ensure that the opacity has been restored to 1:
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear')
.animate({ opacity: 1 }, 1200, 'linear', pulsate)
.click(function() {
//Restore opacity to 1
$(this).animate({ opacity: 1 }, 1200, 'linear');
//Stop all animations
$(this).stop();
});
}
pulsate();
});
Here's a working jsFiddle.
The solution is pretty simple. Have your pulsate() function make sure that .pulsate doesn't have the class stop before doing its thing. If it does have that class, then the pulsate() function will simply animate the link back to full opacity, but not continue the pulsating.
James' example works as well, but I prefer my approach because his way binds the click event to .pulsate over and over again. This kind of thing may cause problems depending on what the rest of your page is doing.
Live example: http://jsfiddle.net/2f9ZU/
function pulsate() {
var pulser = $(".pulsate");
if(!pulser.hasClass('stop')){
pulser.animate({opacity: 0.2}, 1200, 'linear')
.animate({opacity: 1}, 1200, 'linear', pulsate);
}else{
pulser.animate({opacity:1},1200)
.removeClass('stop');
}
}
$(document).ready(function() {
pulsate();
$('a').click(function(){
$('.pulsate').addClass('stop');
});
});