Jquery Animate - trigger function mid way through animation - javascript

Is it possible to trigger a function mid way through an animation?
The animation includes a solid block which swipes over an image from top to bottom - I would like to trigger a function at the point that the image is completely covered and remove the image from the html (mid way through the animation)
My current function is -
function animateCover() {
$('#cover').animate({ bottom: '1400px'}, 4000, function() { });
}
The image is completely covered at 800px point - can I access this property to trigger a function?

since there isn't a tick counter in jQuery, you need to "emulate" it:
function animateCover() {
var
$cover = $('#cover'),
interval = setInterval(function(){
if ($cover.is(':animated')){
if (parseInt($cover.css('bottom')) > 800){
alert('trigger');
clearInterval(interval);
}
} else {
clearInterval(interval);
}
}, 13); // 13 is the minimum possible in Javascript
$cover.animate({ bottom: '1400px'}, 4000, function() { $cover.text('done'); });
}
jsFiddle: http://jsfiddle.net/emV4p/1/

What about splitting the animation into 2.
function animateCover() {
$('#cover').animate({ bottom: '700px'}, 2000, function() {
$('#imgID').hide();
$('#cover').animate({ bottom: '1400px'}, 2000 );
});
}

Updated: Here's a perfectly working solution with minimal code-
WORKING DEMO
jQuery-
$(document).ready(function(){
setInterval(function(){
$("#image").css('background-image','none');
},2000);
$("#block").animate({
bottom:'400px'
},3000);
});

Related

Jquery trigger div height change event (animate?)

I need to detect the total height of my div "collectionFilterPage" while the animate event is running. Is there any event to bind?
This is my ja code:
function showMoreItems() {
$("#collectionFilterPage").animate({
height: "+=720"
}, 1000, function() {
if ($("#collectionFilterPage").outerHeight() >= $(".lista").outerHeight())
unbindScrollEvent();
});
}
Basically I would want to fire the "unbindScrollEvent" when both div "collectionFilterPage" and "lista" have the same height.
thanks
You might want to switch to this $().aninate signature and use the step property which allows you to set a callback function that is called during each step of the animation.
function showMoreItems() {
function checkHeight() {
if ($("#collectionFilterPage").outerHeight() >= $(".lista").outerHeight())
unbindScrollEvent();
}
$("#collectionFilterPage").animate({
height: "+=720"
}, {
duration: 1000,
complete: checkHeight,
step: checkHeight
});
}
http://api.jquery.com/animate/
$(...).animate( properties, options );
Solved. It has been very easy
height: $("#collectionFilterPage").outerHeight() >=
$(".lista").outerHeight() ? "+=0" : "+=720"

Scroll down page event for x seconds

I am currently able to scroll down a page with the help of CasperJS. I saw this article on how to scroll infinite pages based on the visibility of certain attributes. However I don't want to base it on the visibility of an element but was wondering if there is a way to set a timer on how long it should stay scrolling down before exiting out. How would be able to such thing?
//function to scroll
function tryAndScroll(casper) {
casper.page.scrollPosition = {
top: casper.page.scrollPosition["top"] + 40000,
left: 0
};
}
/**
* Everything starts here!
* I use the mobile version of facebook as the DOM is waaay simpler to scrape.
*/
casper.start('https://www.somesite.com', function() {
});
casper.then(function() {
tryAndScroll(this);
});
casper.then(function() {;
this.exit();
});
casper.run();
Here's a simple way:
function tryAndScroll(casper) {
casper.page.scrollPosition = {
top: casper.page.scrollPosition["top"] + 300,
left: 0
};
}
casper.start(url).then(function() {
var self = this;
var intervalId = setInterval(function(){
tryAndScroll(self);
}, 100); // retry interval
self.wait(10000 /* infinite scroll timeout */, function(){
clearInterval(intervalId);
});
}).run();
Since setInterval() is not a CasperJS step function, this essentially break out of the control flow of CasperJS. The wait() is necessary so that CasperJS doesn't execute something else during the scroll.
Also, you can't use a scroll distance of 40000 pixels. This is too big and PhantomJS won't be able to take a screenshot.

I want to move button left-right and right-left using jquery

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
});
}
}
?

jQuery Pause / Resume animate

This ain't working for me...
$(document).ready(function(){
$('#h .a').animate({
top:'-=80px'
},90,'linear');
$('#h .au,#h .di').animate({
left:'-=80px'
},50000000,'linear');
$('#h .r').animate({
left:'-=80px'
},250,'linear');
$("#h").animate('pause'); //pausing it at the start
//resume pause switch
$("#h").mouseover(function(){
$(this).animate('resume');
}).mouseout(function(){
$(this).animate('pause');
});
});
try this one for pause and resume: jQuery Pause / Resume animation plugin
also we $(this).stop() can pause animate but no chance to resume!
other mistake is this one: top:'-=80px'
first try to get current position like this then add position to it:
_top = $(this).offset().top;
$('#h .a').animate({
top:_top-80
},90,'linear')
Check out the demo here: http://api.jquery.com/clearQueue/
Looks like exactly the sort of thing you're trying to do.
Check the plugin: Fxqueues
https://github.com/lucianopanaro/jQuery-FxQueues
It supports both pause and resume (without clearing the queue) and adds the idea of Scopes. Scopes are great for chaining animations across multiple objects.
I haven't found a version of Fxqueus for the current version of Jquery, but have used it successfully with older Jquery versions.
You'll want to look into using the .stop() function for this, as it'll stop any animations on a jQuery element.
http://api.jquery.com/stop/
Use queue() and dequeue() functions. Here's an example taken directly from jQuery documentation.
Check working example at http://jsfiddle.net/j4SNS/
<style type="text/css">
.scroll {
width:100%;
overflow:hidden;
position:relative;
}
.scrollingtext {
white-space:nowrap;
position:absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.scrollingtext').bind('marquee', function () {
marqueeFunction($(this), 'START');
}).trigger('marquee');
$('.scrollingtext').mouseover(function () {
$(this).stop();
});
$('.scrollingtext').mouseout(function () {
marqueeFunction($(this), 'RESUME');
});
});
function marqueeFunction(ob, type) {
// ========== HOROZONTAL ==========
// var tw = ob.width();
// var ww = ob.parent().width();
// if (type == 'START')
// ob.css({ right: -tw });
// ob.animate({ right: ww }, 20000, 'linear', function () {
// ob.trigger('marqueeX');
// });
// ========== VERTICAL ==========
var th = ob.height();
var hh = ob.parent().height();
if (type == 'START')
ob.css({ bottom: -th });
ob.animate({ bottom: hh }, 20000, 'linear', function () {
ob.trigger('marquee');
});
}
</script>
<div class="scroll">
<div class="scrollingtext">Some HTML to scroll as a marquee</div>
</div>

Text blinking jQuery

What is an easy way to make text blinking in jQuery and a way to stop it? Must work for IE, FF and Chrome. Thanks
A plugin to blink some text sounds a bit like overkill to me...
Try this...
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 500);
});
Try using this blink plugin
For Example
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.
It is also a very simple plugin, and you could probably extend it to stop the animation and start it on demand.
here's blinking with animation:
$(".blink").animate({opacity:0},200,"linear",function(){
$(this).animate({opacity:1},200);
});
just give a blink class whatever u want to blink:
<div class="someclass blink">some text</div>
all regards to DannyZB on #jquery
features:
doesn't need any plugins (but JQuery itself)
does the thing
If you'd rather not use jQuery, this can be achieved with CSS3
#-webkit-keyframes blink {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 1s;
}
Seems to work in Chrome, though I thought I heard a slight sobbing noise.
Combine the codes above, I think this is a good solution.
function blink(selector){
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(800);
$(this).animate({opacity:1}, 50, function(){
blink(this);
});
$(this).delay(800);
});
}
At least it works on my web.
http://140.138.168.123/2y78%202782
Here's mine ; it gives you control over the 3 parameters that matter:
the fade in speed
the fade out speed
the repeat speed
.
setInterval(function() {
$('.blink').fadeIn(300).fadeOut(500);
}, 1000);
You can also use the standard CSS way (no need for JQuery plugin, but compatible with all browsers):
// Start blinking
$(".myblink").css("text-decoration", "blink");
// Stop blinking
$(".myblink").css("text-decoration", "none");
W3C Link
This is the EASIEST way (and with the least coding):
setInterval(function() {
$( ".blink" ).fadeToggle();
}, 500);
Fiddle
Now, if you are looking for something more sophisticated...
//Blink settings
var blink = {
obj: $(".blink"),
timeout: 15000,
speed: 1000
};
//Start function
blink.fn = setInterval(function () {
blink.obj.fadeToggle(blink.speed);
}, blink.speed + 1);
//Ends blinking, after 'blink.timeout' millisecons
setTimeout(function () {
clearInterval(blink.fn);
//Ensure that the element is always visible
blink.obj.fadeIn(blink.speed);
blink = null;
}, blink.timeout);
Fiddle
You can also try these:
<div>some <span class="blink">text</span> are <span class="blink">blinking</span></div>
<button onclick="startBlink()">blink</button>
<button onclick="stopBlink()">no blink</button>
<script>
function startBlink(){
window.blinker = setInterval(function(){
if(window.blink){
$('.blink').css('color','blue');
window.blink=false;
}
else{
$('.blink').css('color','white');
window.blink = true;
}
},500);
}
function stopBlink(){
if(window.blinker) clearInterval(window.blinker);
}
</script>
$.fn.blink = function(times, duration) {
times = times || 2;
while (times--) {
this.fadeTo(duration, 0).fadeTo(duration, 1);
}
return this;
};
Here you can find a jQuery blink plugin with its quick demo.
Basic blinking (unlimited blinking, blink period ~1 sec):
$('selector').blink();
On a more advanced usage, you can override any of the settings:
$('selector').blink({
maxBlinks: 60,
blinkPeriod: 1000, // in milliseconds
onBlink: function(){},
onMaxBlinks: function(){}
});
There you can specify the max number of blinks as well as have access to a couple of callbacks: onBlink and onMaxBlinks that are pretty self explanatory.
Works in IE 7 & 8, Chrome, Firefox, Safari and probably in IE 6 and Opera (although haven't tested on them).
(In full disclosure: I'm am the creator of this previous one. We had the legitimate need to use it at work [I know we all like to say this :-)] for an alarm within a system and I thought of sharing only for use on a legitimate need ;-)).
Here is another list of jQuery blink plugins.
this code is work for me
$(document).ready(function () {
setInterval(function(){
$(".blink").fadeOut(function () {
$(this).fadeIn();
});
} ,100)
});
You can try the jQuery UI Pulsate effect:
http://docs.jquery.com/UI/Effects/Pulsate
Easiest way:
$(".element").fadeTo(250, 0).fadeTo(250,1).fadeTo(250,0).fadeTo(250,1);
You can repeat this as much as you want or you can use it inside a loop. the first parameter of the fadeTo() is the duration for the fade to take effect, and the second parameter is the opacity.
$(".myblink").css("text-decoration", "blink");
do not work with IE 7 & Safari. Work well with Firefox
This stand-alone solution will blink the text a specified number of times and then stop.
The blinking uses opacity, rather than show/hide, fade or toggle so that the DIV remains clickable, in case that's ever an issue (allows you to make buttons with blinking text).
jsFiddle here (contains additional comments)
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var init = 0;
$('#clignotant').click(function() {
if (init==0) {
init++;
blink(this, 800, 4);
}else{
alert('Not document.load, so process the click event');
}
});
function blink(selector, blink_speed, iterations, counter){
counter = counter | 0;
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(blink_speed);
$(this).animate({opacity:1}, 50, function(){
counter++;
if (iterations == -1) {
blink(this, blink_speed, iterations, counter);
}else if (counter >= iterations) {
return false;
}else{
blink(this, blink_speed, iterations, counter);
}
});
$(this).delay(blink_speed);
});
}
//This line must come *AFTER* the $('#clignotant').click() function !!
window.load($('#clignotant').trigger('click'));
}); //END $(document).ready()
</script>
</head>
<body>
<div id="clignotant" style="background-color:#FF6666;width:500px;
height:100px;text-align:center;">
<br>
Usage: blink(selector, blink_speed, iterations) <br />
<span style="font-weight:bold;color:blue;">if iterations == -1 blink forever</span><br />
Note: fn call intentionally missing 4th param
</div>
</body>
</html>
Sources:
Danny Gimenez
Moses Christian
Link to author
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<div id="msg"> <strong><font color="red">Awesome Gallery By Anil Labs</font></strong></p> </div>
<script type="text/javascript" >
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('#msg');
</script>
I was going to post the steps-timed polyfill, but then I remembered that I really don’t want to ever see this effect, so…
function blink(element, interval) {
var visible = true;
setInterval(function() {
visible = !visible;
element.style.visibility = visible ? "visible" : "hidden";
}, interval || 1000);
}
I feel the following is of greater clarity and customization than other answers.
var element_to_blink=$('#id_of_element_to_blink');
var min_opacity=0.2;
var max_opacity=1.0;
var blink_duration=2000;
var blink_quantity=10;
var current_blink_number=0;
while(current_blink_number<blink_quantity){
element_to_blink.animate({opacity:min_opacity},(blink_duration/2),"linear");
element_to_blink.animate({opacity:max_opacity},(blink_duration/2),"linear");
current_blink_number+=1;
}
This code will effectively make the element(s) blink without touching the layout (like fadeIn().fadeOut() will do) by just acting on the opacity ; There you go, blinking text ; usable for both good and evil :)
setInterval(function() {
$('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);
Blinking !
var counter = 5; // Blinking the link 5 times
var $help = $('div.help');
var blinkHelp = function() {
($help.is(':visible') ? $help.fadeOut(250) : $help.fadeIn(250));
counter--;
if (counter >= 0) setTimeout(blinkHelp, 500);
};
blinkHelp();
This code might help to this topic. Simple, yet useful.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval("$('#myID/.myClass').toggle();",500);
});
</script>
I like alex's answer, so this is a bit of an extension of that without an interval (since you would need to clear that interval eventually and know when you want a button to stop blinking. This is a solution where you pass in the jquery element, the ms you want for the blinking offset and the number of times you want the element to blink:
function blink ($element, ms, times) {
for (var i = 0; i < times; i++) {
window.setTimeout(function () {
if ($element.is(':visible')) {
$element.hide();
} else {
$element.show();
}
}, ms * (times + 1));
}
}
Some of these answers are quite complicated, this is a bit easier:
$.fn.blink = function(time) {
var time = typeof time == 'undefined' ? 200 : time;
this.hide(0).delay(time).show(0);
}
$('#msg').blink();
Seeing the number of views on this question, and the lack of answers that cover both blinking and stopping it, here goes: try jQuery.blinker out (demo).
HTML:
<p>Hello there!</p>
JavaScript:
var p = $("p");
p.blinker();
p.bind({
// pause blinking on mouseenter
mouseenter: function(){
$(this).data("blinker").pause();
},
// resume blinking on mouseleave
mouseleave: function(){
$(this).data("blinker").blinkagain();
}
});
Indeed a plugin for a simple blink effect is overkill. So after experimenting with various solutions, I have choosen between one line of javascript and a CSS class that controls exactly how I want to blink the elements (in my case for the blink to work I only need to change the background to transparent, so that the text is still visible):
JS:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});
CSS:
span.no-bg {
background-color: transparent;
}
Full example at this js fiddle.
Blink functionality can be implemented by plain javascript, no requirement for jquery plugin or even jquery.
This will work in all the browsers, as it is using the basic functionality
Here is the code
HTML:
<p id="blinkThis">This will blink</p>
JS Code:
var ele = document.getElementById('blinkThis');
setInterval(function () {
ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);
and a working fiddle
This is what ended up working best for me. I used jQuery fadeTo because this is on WordPress, which already links jQuery in. Otherwise, I probably would have opted for something with pure JavaScript before adding another http request for a plugin.
$(document).ready(function() {
// One "blink" takes 1.5s
setInterval(function(){
// Immediately fade to opacity: 0 in 0ms
$(".cursor").fadeTo( 0, 0);
// Wait .75sec then fade to opacity: 1 in 0ms
setTimeout(function(){
$(".cursor").fadeTo( 0, 1);
}, 750);
}, 1500);
});
I have written a simple jquery extension for text blink whilst specifying number of times it should blink the text, Hope it helps others.
//add Blink function to jquery
jQuery.fn.extend({
Blink: function (i) {
var c = i; if (i===-1 || c-- > 0) $(this).fadeTo("slow", 0.1, function () { $(this).fadeTo("slow", 1, function () { $(this).Blink(c); }); });
}
});
//Use it like this
$(".mytext").Blink(2); //Where 2 denotes number of time it should blink.
//For continuous blink use -1
$(".mytext").Blink(-1);
Text Blinking start and stop on button click -
<input type="button" id="btnclick" value="click" />
var intervalA;
var intervalB;
$(document).ready(function () {
$('#btnclick').click(function () {
blinkFont();
setTimeout(function () {
clearInterval(intervalA);
clearInterval(intervalB);
}, 5000);
});
});
function blinkFont() {
document.getElementById("blink").style.color = "red"
document.getElementById("blink").style.background = "black"
intervalA = setTimeout("blinkFont()", 500);
}
function setblinkFont() {
document.getElementById("blink").style.color = "black"
document.getElementById("blink").style.background = "red"
intervalB = setTimeout("blinkFont()", 500);
}
</script>
<div id="blink" class="live-chat">
<span>This is blinking text and background</span>
</div>

Categories