Parallel jQuery effects - javascript

I want to execute two effects in parallel. A jQuery UI "transfer" animation and a "fadeIn" on another element. They should begin and end at the same time.
My code so far:
$('#foo').hover(function() {
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, 300, function() {
$('#bar').fadeIn(300);
});
});
I understand that both effects are executed one after another. Is it possible to achieve parallel effect execution?

You had the fadeIn function in the "callback" of the effect. The callback is triggered/run only after the animation has finished. This should help you out..
$('#foo').hover(function() {
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, 300);
$('#bar').fadeIn(300);
});

$('#foo').hover(function() {
$('#bar').fadeIn(300);
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, 300 );
});

You can do 2 or more parallel fx using animate.

Two run the two animations in parallel i.e. simultaneously use queue : false and don't put the second animation in the callback function of the first one like this:
$('#foo').hover(function() {
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, { duration:300, queue: false});
$('#bar').fadeIn({ duration: 300, queue: false});
});

Related

jQuery 3.5.1 callback function in .animate() not working

I have a problem making a callback function in .animate().
The animation goes very smoothly and without problems, but the complete: ()=> part is not working at all. I've copied this structure from the documentation but it just doesn't want to coop after my changes. Does anyone know why it doesn't work? Is it cause by setInterval? If so, how can I loop this animation?
The code is as follows:
setInterval(() => {
$(".slide")[0].animate({
"marginLeft": "-100%"
}, {
duration: 2000,
easing: "linear",
complete: () => {
console.log("test");
},
});
}, 6000);
You will need to make use of the correct selector:
setInterval(() => {
$(".slide").eq(0).animate({
"marginLeft": "-100%"
}, {
duration: 2000,
easing: "linear",
complete: () => {
console.log("test");
},
});
}, 6000);
When you get element 0 fro mthe Object, it returns the DOM Element and not a jQuery Object. See More:
https://api.jquery.com/eq/

How to wait for page to load befor Reveal.js starts

I have a short reveal.js presentation hosted here on GitHub pages.
I want to wait for the page to fully load before auto-starting the presentation. If the connection is slow, awesomefonts don't get rendered in time, and the user can only see an empty block.
Is it possibile to wait some time before start?
Okay, so after a minute of browsing your code, I noticed that you probably need an onload block in your script before initializing Reveal.js. Try putting the
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: true,
autoSlide: 2200,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true }
]
});
Inside of:
object.onload=function(){myScript};
Hope this helps. The presentation looks great btw.
put your init code inside window.onload() function
if you need multiple things to be loaded asyncronously, just create a myLoad() function and a objToBeLoaded counter, then each time an obj has loaded, make it call somethingHasLoad() function that will check for that counter and eventually call myLoad()

How can I add an 'ended' function to .animate()

In the following jQuery statement, I'm attempting to enable the pointer events when the button animation completes, but it is unclear to me how to implement an ended or complete function. Any recommendations?
$('#certButton').delay(5500).animate({ 'opacity': [ 1, "linear" ]}, 500);
As described in the documentation, this can be added as the 4th parameter of the animate() function, like that:
$('#certButton').delay(5500).animate(
{ 'opacity': 1 },
500,
"linear",
function() {
}
);
Update:
JSFiddle here.
I am also unsure why this line
{ 'opacity': [ 1, "linear" ]}
works, but I think the syntax conforming with the documentation I used above looks cleaner, and functions the same (see the JSFiddle).
Thanks for the help.
I have reworked it off your answers to the below code.
$('#certButton').delay(500).animate({ 'opacity': [ 1, "linear" ]}, {
duration:500,
complete: function() {
document.getElementById("certButton").style.pointerEvents = "visible";
}
});

JqueryMobile animation not looping while call to cordova.exec

so I have a button which when clicked call cordova more or less like this :
$(document).delegate("#update", "tap", A);
function A() {
$.mobile.loading('show', {
text: "Please Wait...",
textVisible: true,
theme: "a"
});
setTimeout(function () {B();}, 100);
}
function B () {
cordova.exec(function(success) {
$.mobile.loading('hide');
},
function(error) {
$.mobile.loading('hide');
},
"MyPlugin",
"MyAction", [""]);
}
When I click on the button, it load the jQueryMobile animation but when the call to cordova is made, the animation stop looping and it gives the feeling the app crashed.
Everywhere I saw it says that call to plugin are asynchronous, but it does not looks like that.
Thanks for your help.

How to start/stop CrossSlide (jQuery)

I found that CrossSlide causes video playback on the same page to stutter quite badly. My thought was to have the cross slide effect on the same page stop or pause during video play back, annd then start again when video stops.
Id doesn't look like there is any start stop function included. Does any one know how I might be able to accomplish this?
Thanks.
I've tried to use stop on the CrossSlide homepage at http://www.gruppo4.com/~tobia/cross-slide.shtml. Doesn't work.
I tried an improvised method, that is using sleep set to a very large value. The down-side is the slides have to revert to the first frame upon calling it and resuming.
On that page, using Firebug to run the exact same crossSlide call except for sleep:
$('#test1').crossSlide({
sleep: 100000, // <--- this one
fade: 1
}, [
{ src: 'lib/sand-castle.jpeg', dir: 'up' },
{ src: 'lib/sunflower.jpeg', dir: 'down' }, // remaining slides doesn't really matter
{ src: 'lib/flip-flops.jpeg', dir: 'up' },
{ src: 'lib/rubber-ring.jpeg', dir: 'down' }
]);
To resume:
$('#test1').crossSlide({
speed: 45, // <--- this one
fade: 1
}, [
{ src: 'lib/sand-castle.jpeg', dir: 'up' },
{ src: 'lib/sunflower.jpeg', dir: 'down' },
{ src: 'lib/flip-flops.jpeg', dir: 'up' },
{ src: 'lib/rubber-ring.jpeg', dir: 'down' }
]);
Note: You can't use sleep and speed together.
It looks like CrossSlide just uses $.animate() on img elements ---
have you tried $('#container img').stop(); ??
I wanted to stop CrossSlide and return the container back to its original state.
$('#container img').stop().hide('fast'); // worked for me!

Categories