I am trying to add a SetTimeout and animation type transition to jQuery Show / Hide call. Below is how I currently have it but am wanting to add the a specific amount of time the 'show' div remains displayed before it reverts back to the orginal #bg_dv. I also want to add animated transitions between the effects if possible.
function tilt(){
$("#area1").click(function(){
$("#bg_div").hide();
$("#bg_skew").show(); // I would like to show this Div for about 5 seconds
// and then have original back.
});
}
$("#bg_div").hide(0).delay(5000).show(0);
$("#bg_skew").show(0).delay(5000).hide(0);
If you want animations, you can replace the calls to hide() and show() with something appropriate. For example fadeIn() and fadeOut().
$("#area1").click(function(){
$("#bg_div").fadeOut('fast',function(){
$("#bg_skew").delay(5000).fadeIn('fast');
});
});
In order to prevent caching of multiple clicks and have the animation play many times
you should also take a look at
.stop(true,true)
before any animation.Also take a look at this animation option - property.
{cache:false}
it's so simple. just put milliseconds in show.delay(5000) it will delay it for 5 seconds.
syntax:
$(selector).delay(speed)
speed: time in millsecnds e.g. 5000 for 5 seconds.
$(selector).show(speed,easing,callback)
speed: here put time in milliseconds like 1000 for 1 second.
easing: it defins speed of elements at different points i.e. "linear" "swing".
callback: here you can put your function it will execute after completing show method. For example when you will click button to show image after showing image it will exexcute funxtion e.g. .show(1000,function(){alert("hello")};);
Hope i helped you.
Related
This is probably a long shot, however I need to fix this somehow, if you have any other tips that could help me achieve the same end result please let me know!
I have a with a bunch of items with unique IDs. These items are continously updated through a Cefsharp application (every 1000ms). I currently have a class named "show" that transitions the list item from 0 height to a specified height in 1 second. The same goes for when the item is removed (show is removed from classes). So everything here works as intended.
For some reason however, every now and then, my list animation seemed to cancel abruptly. I couldn't figure out why. Just a few minutes ago I realized it was my sortList function:
function sortList() {
$("#orderQueueList li").sort(function (a, b) {
return parseInt($(a).data('indexn')) - parseInt($(b).data('indexn'));
}).appendTo('#orderQueueList');
}
This function is executed everytime a new item is added to the list or a current item has it's "indexn" value updated. So if the animation is queued (the animation has a 5 second setTimeout) and the list is sorted during this time, or during the actual animation, it is cancelled.
I haven't really been able to figure out how to solve this. My initial thought was that the sortList would wait until all animations are completed. However the animations are .CSS sided so I'm not sure if this is possible. I've been Googling around a bit and can't really find an answer.
I either want the 5 second delay to execute immediately (so the animation is completed) or the sortList function to wait until the animation is complete. Is this possible somehow through JavaScript/jQuery?
Thank you!
You can add another parameter to the animate function that triggers a function once it has finished jquery doc explaining that here (5000) is the duration)
Note that the function is called once per matched elements
$( "#clickme" ).click(() => {
$( "#whatever" ).animate({
left: "+=50",
}, 5000, () => { // <--- other parameter is here
// Animation complete.
});
});
I want to repeat shake animation using animate.css after 6 seconds once.
Here is the code I've tried so far.
the first part of animating works great but the second one. it just doesn't.
With JavaScript, I can setTimeout to fire after 6 seconds, remove the shake animation, then add shake class back to the element, and the problem is exactly here, although setTimeout fires, second shake animation doesn't appear (The animation which is expected to appear after 6 seconds)
// First Part: Adding animation to the object
document.querySelectorAll(".profile")[userA_Index].classList.add('animated', 'shake', 'slow', 'delay-1s')
//Second Part: Now I remove the first shake animation and add the second one after 6 seconds, But unexpectedly the animation here doesn't work...
setTimeout(function(){
document.querySelectorAll(".profile")[userA_Index].classList.remove('animated', 'shake')
document.querySelectorAll(".profile")[userA_Index].classList.add('animated', 'shake', 'slow', 'delay-1s')
}, 6000);
In lack of proper vocabulary, i'll explain it like this:
This is treated as a single DOM modification, as you add and remove the same class in the same DOM update, and looks as as if nothing changes.
Add a second setTimeout, to push a separate DOm update, after the first has taken place :
setTimeout(function(){
document.querySelectorAll(".profile")[userA_Index].classList.remove('animated', 'shake');
setTimeout(function(){
document.querySelectorAll(".profile")[userA_Index].classList.add('animated', 'shake', 'slow', 'delay-1s')
}, 16); // can work for 0 also, but i usually like to leave a frame in between
}, 6000);
I have a reveal.js presentation with approximately 300 slides. The purpose of this presentation is to cycle slides in "kiosk mode" on a monitor behind a conference booth.
To create a "kiosk mode" I've got:
Reveal.initialize({
controls: false, // hide the control arrows
progress: false, // hide the progress bar
history: false, // don't add each slide to browser history
loop: true, // loop back to the beginning after last slide
transition: fade, // fade between slides
autoSlide: 5000, // advance automatically after 5000 ms
});
This works very well, but I'd like to randomize the slides. The slides are currently just a list of 300 <section> tags in the index document - they aren't being pulled from anywhere external. Currently random: true isn't a configuration option in reveal.js.
The display order of fragments can be controlled with data-fragment-index. Is it possible to do something like that with sections? Is there a way to trick reveal.js into randomizing my slides?
My preference would be to shuffle them each time around - that is, to show slides 1-300 in random order, and then shuffle them, and show 1-300 again in a different random order. I would also be happy with just jumping to a random slide for each transition, though.
While Reveal itself does not have this functionality built in, it does let you set up event hooks to do actions when all the slides are loaded, this means JQUERY TO THE RESCUE!
You can combine Reveal's "All slides are ready" event with simple javascript to reorder all the sections, here's a simple PoC:
First import jQuery, I did this by adding it directly above the import for js/reveal.min.js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Then, set up an event listener:
Reveal.addEventListener('ready', function(event) {
// Declare a function to randomize a jQuery list of elements
// see http://stackoverflow.com/a/11766418/472021 for details
$.fn.randomize = function(selector){
(selector ? this.find(selector) : this).parent().each(function(){
$(this).children(selector).sort(function(){
return Math.random() - 0.5;
}).detach().appendTo(this);
});
return this;
};
// call our new method on all sections inside of the main slides element.
$(".slides > section").randomize();
});
I put this right after declaring my Reveal settings and dependencies, but I'm pretty sure you can put it anywhere.
What this does is waits for all javascript, css, etc to load, manually reorders the slides in the DOM, then lets Reveal start off doing its thing. You should be able to combine this with all your other reveal settings since it's not doing anything disruptive to reveal itself.
Regarding the "shuffling them each time around" portion, the easiest way to do this would be to use another event listener, slidechanged. You could use this listener to check if the last slide has just been transitioned to, after which the next time slidechanged is called you could simply refresh the page.
You can do this with something like:
var wasLastPageHit = false;
Reveal.addEventListener('slidechanged', function(event) {
if (wasLastPageHit) {
window.location.reload();
}
if($(event.currentSlide).is(":last-child")) {
// The newly opened slide is the last one, set up a marker
// so the next time this method is called we can refresh.
wasLastPageHit = true;
}
});
As of reveal.js 3.3.0 there is now a built in helper function for randomizing slide order.
If you want the slide order to be random from the start use the shuffle config option:
Reveal.initialize({ shuffle: true });
If you want to manually tell reveal.js when to shuffle there's an API method:
Reveal.shuffle();
To shuffle the presentation after each finished loop you'll need to monitor slide changes to detect when we circle back to the first slide.
Reveal.addEventListener( 'slidechanged', function( event ) {
if( Reveal.isFirstSlide() ) {
// Randomize the order again
Reveal.shuffle();
// Navigate to the first slide according to the new order
Reveal.slide( 0, 0 );
}
} );
I am using jquery to display text when clicked on a state with some animation. The problem is the animation effect is running only for the first time the state is clicked and not on the second time. The code is as follows:
$("#maharashtra").live("click",function(){
$("#mainbg").hide();
$("#divmaha").animate({left:"700px"});
$("#divmaha").show() ;
$("#divguj").hide();
$("#divgoa").hide();
$("#divkerala").hide();
$("#divassam").hide();
$("#divmeghalaya").hide();
$("#divarunachal").hide();
$("#divmizoram").hide();
$("#divkarnataka").hide();
$("#divandhra").hide();
$("#divtamilnadu").hide();
$("#divraj").hide();
$("#divjammu").hide();
$("#divuttaranchal").hide();
$("#divhp").hide();
$("#divharyana").hide();
$("#divpunjab").hide();
$("#divdelhi").hide();
$("#divmadhya").hide();
$("#divjharkhand").hide();
$("#divchattisgarh").hide();
$("#divup").hide();
$("#divorissa").hide();
$("#divbihar").hide();
$("#divwestbengal").hide();
$("#divsikkim").hide();
$("#divtripura").hide();
$("#divnagaland").hide();
});
That's because your animation has already been performed. Now, introduce a "Reset" button and add reverse of everything in the animation so it moves back to its original place. Now again whenever someone would click that animate button, it'll animate.
Btw, you can compress this code. Combine the selectors and separate them with comma.
Try to make it on
$("#maharashtra").on("click",function(){ });
Since you havent provided your full code i have another guess that you may not have reset the animation.
after hiding all that stuffs.. are u showing all dose hidden stuffs before the second click.?
because animation get performed on first click. try this. you will get to know what the problem.
$("#maharashtra").live("click",function(){
reset();
$("#mainbg").hide();
$("#divmaha").animate({left:"+=700px"});
$("#divmaha").show() ;
});
function reset ()
{
//reset your element to original position here and then you dont need write +=700px you can simply write left:"700px"
}
Now your element will get animatte to left by 700px on each click if you want to.
fiddle: http://jsfiddle.net/chetandoke/QwWUn/
I need to be able to rotate between five distinct pieces of html in my webpage every 8 seconds.
What's the best way to do this? JQuery or native JS is fine.
There are definitely a lot of plugins for that.
But here's some basic structure you could use if you want to do it yourself:
// assuming all your divs have the class `rotating-content`:
$(document).ready(function() {
var divs = $('.rotating-content').hide();
var curr_div = divs.first().show();
function nextcontent() {
// hide current div, then move the next one or the first div, and show it
curr_div = curr_div.hide().next().add(divs.first()).first().show();
setTimeout(nextcontent, 5000); // 5 seconds
}
setTimeout(nextcontent, 5000);
});
You mean like a slideshow? You can use jQuery Cycle plugin from malsup,
here's an example: http://jsfiddle.net/JKirchartz/zLekb/ (none of this extra stuff is necessary, this is just an example I've been recycling)
if you want it to change every 8 seconds change timeout to 8000 (it's measured in milliseconds)