Does anyone know how to add a callback after a dequeue in jQuery has been completed? If not, can you provide me with how to add a delay to a dequeue? Thanks a million!
Might need more info, but if you are trying to have some code called after a particular queued item is dequeued, you could wrap the original queued function with your own. For example, you could change from:
$("#xyz").queue(someFunction);
to this:
$("#xyz").queue(function() {
someFunction();
// your callback code here
});
I'm assuming that "someFunction" calls dequeue in order to keep the sequence going.
You can use a promise (http://api.jquery.com/promise/). Here is some code I (literally) just wrote which ensures that some divs are finished hiding before a show etc on them is started. The function passed into the done call on the promise will only get run after all the effects are finished. I put the next() (=>dequeue) call in there so the next queued item gets run.
<style>
#pieces { width: 300px; height: 100px; background-color: lightblue;}
#pieces .piece { width: 75px; height: 75px; border: 1px solid grey; float: left;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var q = $({});;
function hidePieces() {
q.queue(function(next){
var pieces = $($("#pieces .piece").get().reverse());
pieces.each( function(i) {
$(this).delay(300*i).slideUp(1000);
});
pieces.promise().done(function(){ next(); });
} );
}
function showPieces() {
q.queue(function(next){
var pieces = $("#pieces .piece");
pieces.each( function(i) {
$(this).delay(300*i).slideDown(1000);
});
pieces.promise().done(function(){ next(); });
} );
}
$(function(){
for( i=0;i<5;i++ ){
hidePieces();showPieces();
}
});
</script>
<div id="pieces">
<div class="piece" id="p1"></div>
<div class="piece" id="p2"></div>
<div class="piece" id="p3"></div>
</div>
Related
Below is the code I am working on
$("#firstnamesubmitbutton").click(function(){
$(".hrmed").addClass("lineanimation", function(){
$(".firstnamesection").addClass("animate fadeOut");
$(".firstnamesection").addClass("hidden");
$(".hrmed").removeClass("lineanimation");
$(".lastnamesection").removeClass("hidden");
alert("Code was executed");
});
});
I am trying to created a nested jQuery function so that the rest of the code is called after the "lineanimation" class has been added but when I run this code the "lineanimation" class is added and the rest of the commands are not executed. Can anyone help me understand the correct syntax to solve my problem?
Thanks in advance
As I'd mentioned above, .addClass() is instant. As such, it does not take a callback method. Additionally, it has no way of inherently knowing the duration of your CSS transition.
Instead, you could use setTimeout(). It will execute a given function after waiting X milliseconds.
The first argument would be the function you've written in your question. The second parameter corresponds to the length of your CSS animation.
(For example, a 3s animation would be 3000.)
$("#firstnamesubmitbutton").click(function() {
var $hrmed = $(".hrmed");
$hrmed.addClass("lineanimation");
setTimeout(function() {
$(".firstnamesection").addClass("animate fadeOut hidden");
$hrmed.removeClass("lineanimation");
$(".lastnamesection").removeClass("hidden");
console.log("Code was executed");
}, 3000);
});
.hrmed {
padding: 50px;
border: 1px solid black;
}
.hrmed.lineanimation {
background: blue;
transition: background 3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="firstnamesubmitbutton">Click me</button>
<div class="hrmed"></div>
Editted
$("#firstnamesubmitbutton").click(function(){
$('.hrmed').delay(1000).queue(function () {
$(this).addClass('lineanimation').dequeue();
}).delay(2000).queue(function () {
$(".firstnamesection").addClass("animate fadeOut");
$(".firstnamesection").addClass("hidden");
$(".lastnamesection").removeClass("hidden");
$(this).removeClass('lineanimation');
alert("Code was executed");
});
});
.hidden {
display: none;
}
.lineanimation {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="firstnamesubmitbutton">Click</button>
<div class="hrmed">
<div class="firstnamesection">firstname</div>
<div class="lastnamesection">lastname</div>
</div>
Here a simple example:
$(function(){ ///scope
function alerter(number){
switch(number){
case 1:
alert("first");
break;
case 2:
alert("second");
break;
}
}
});
#first{
width: 300px;
height: 300px;
background: red;
}
#second{
width: 300px;
height: 300px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="first" onclick="alerter(1)">
</div>
<div id="second" onclick="alerter(2)">
</div>
The error message says: "alerter is not defined"
I cant use the js .click() function (or an eventlistener) in my project, bacause there are not permanent piece of divs.
Of course it would work if the "alerter" function wasn't be inside the scope function, but i don't want to declare global variables.
Thanks for the help!
If you won't declare it as a global function the html won't be able to call it. If you wan't you can reverse your logic and do something like the following.
$(function() { ///scope
$("#first").on("click", function() {
alerter(1);
});
$("#second").on("click", function() {
alerter(2);
});
function alerter(number) {
switch (number) {
case 1:
alert("first");
break;
case 2:
alert("second");
break;
}
}
});
#first {
width: 300px;
height: 300px;
background: red;
}
#second {
width: 300px;
height: 300px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
</div>
<div id="second">
</div>
This way you can keep your global scope clean and yet you'll have the same functionality.
The problem here is that "alerter" is defined into the temporary scope created by the call to the anonymous function.
If you want it outside of its scope you need to do something like
window.alerter = function alerter...
[Edit]
Since you don't want to declare a "global" variable, you'll need to stick the event using js, cf comment.
And you can do it using delegated events aka jQuery's "on" method. It does not need permanent divs for it to work.
It may help if you explained what you are trying to achieve with this code. Is there a specific reason for using switch statements? You may want to consider using jQuery .on event as #dader pointed out. An example being:
$("#first").on('click', function() { alert("First") })
I have read jquery docs many times but fail to understand the dequeue method. Consider the following example:
var div = $(".div");
div.animate({
height: "200px"
}, 3000).queue(function(){
console.log("3 seconds passed and I show off without dequeue");
});
div {
width: 300px;
height: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
When you run this script you'd see that the function inside queue fires after 3 seconds but I have not dequeued it. jQuery says dequeue takes the function out of queue and then executes it. But if the function can execute without dequeue then what's the use dequeue?
.dequeue() is called to keep the queue being executed, if you have two animations, the second won't be called if you don't use it. Check the next example, based on your code: the first div has .dequeue commented so only one animation is executed.
var divClass = $(".div");
divClass.animate({
height: "50px"
}, 500).queue(function(){
//$(this).dequeue();
}).animate({height: "100px"},500);
var div = $("div");
div.animate({
height: "50px"
}, 500).queue(function(){
$(this).dequeue();
}).animate({height: "100px"},500);
div {
width: 300px;
height: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">First DIV</div>
<span>HELLO</span>
<div>Second DIV</div>
I am new to jquery and have problem with one part of my script. basically I am making dropdown div when mouse is over the button, but div starts moving up and down like crazy. here is what i have done: `
<script type="text/javascript">
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
$("#drop1").slideDown();
});
$("#first").mouseout(function(){
$("#drop1").slideUp();
});
});
also I tried using boolean variable but it gives me error.
<script type="text/javascript">
$(document).ready(function(){
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
if(!opened){
$("#drop1").slideDown();
opened = true;
}
});
$("#first").mouseout(function(){
if(opened){
$("#drop1").slideUp();
opened = false;
}
});
});
here is HTML if you want, but I think there is everything ok.
<link rel="stylesheet" type="text/css" href="design.css">
<div id="first" style="position: absolute; left: 0px;">
<a class="btn" href = "TheShooter/Launcher.exe" ><b>LAN shooter project</b></a>
<div id="drop1">
<em>shooter project main page</em> <br/>
info: Local Area Network multiplayer game, made with unity. Project not finished yet, but sometimes fun to play. <br/>
controls: walking: w,a,s,d<br/>
shoot: LMB.<br/>
zoom: RMB.
</div>
</div>
Thanks for any help.
--Nick.
So it looks like you might be more used to strongly typed languages like C#. JavaScript and its library jQuery are loosely typed, meaning you don't declare scope or type. Here's your code above cleaned up a bit to use correct syntax and solve the issues you're seeing:
$(document).ready(function(){
var opened = false;
// Instead of sliding this up, give the #drop1 element
// a property of display: none; to start - then remove the line below
$("#drop1").slideUp();
$("#first").mouseover(function(){
if(!opened){
// Below, I'm using a callback, which means the boolean
// won't update to true until after the animation is finished
$("#drop1").slideDown(400, function() {
opened = true;
});
}
})// Since it's the same element, we can chain events
.mouseout(function(){
if(opened){
// Another callback
$("#drop1").slideUp(400, function() {
opened = false;
});
}
}
});
});
Let me know if you have any questions about the above!
Hi please refer this fiddle which should answer your question. No need to add any boolean or conditional checking:
<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>
and js
$(document).ready(function(){
$("#wrap").mouseover(function(){
$("#video").stop().slideDown("slow");
});
$("#wrap").mouseout(function(){
$("#video").slideUp("slow");
});
});
and css
#text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
}
#video
{
display:none;
width:1024px;
height:278px;
border: 1px solid #000;
}
I think you should try something like this:
$(document).ready(function() {
$("#first").mouseover(function(){
$("#drop1").slideDown("slow");
});
$("#first").mouseout(function(){
$("#drop1").slideUp("slow");
});
});
See this example above, from the jQuery offical documentation, for more information:
http://api.jquery.com/mouseover/
http://api.jquery.com/mouseout/
Here is one more answer with live example,
$(document).ready(function(){
$("#drop1").mouseover(function(){
$("#first").slideDown("slow");
});
$("#drop1").mouseout(function(){
$("#first").slideUp("slow");
});
});
#first, #drop1 {
padding: 5px;
text-align: center;
background-color: #acacac;
border: solid 1px #c3c3c3;
}
#first {
padding: 50px;
display: none;
background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="drop1">Mouse over on panel to slide down</div>
<div id="first">Hello Stackoverflow ..!</div>
I have a div and I'm trying to shrink it when I click a button. And when I click it again, I want it back to the original size. I'm using toggleClass for this, but I did something wrong with my code, and I'm not sure where. Please take a look. Thanks.
//*********************************************************************
<style>
div {
border: 1px solid black;
width: 500px;
height: 500px;
}
.shrink {
width: 250px;
height: 250px;
}
</style>
//*********************************************************************
<button type = "button"> click me </button>
<div> Can you tell me a secret? </div>
//*********************************************************************
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready($function {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
</script>
//*********************************************************************
It's kind of a typo. You wrote "$function {" but you probably mean this:
$(document).ready(function() {
The rest is fine.
Also, document ready can be expressed in a shorter form:
$(function() {
...
...
});
Maybe you just confused those two. I did a few times too, back in my beginner days :)
Here: the jQuery ready method takes an anonymous function as an argument... so te problem with your code was only to pass that function function(){}
Here you can see the code in action: http://jsfiddle.net/leojavier/41wmck17/
$(document).ready(function() {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});