Is there any way to execute an already defined function on javascript everytime a modification occurs in the animation of the easing of the slideToggle() function?
Example:
SlideToggle("1000", "linear", functiontoexecute())
I would like functiontoexecute() to execute every step it occurs on the "linear" easing.
I have already looked on JQuery webpage for .slideToggle() and tried to use "progress" or "step" options... but either they don't perform as expected or I didn't use them properly...
For more details I am using JQuery 1.9.1
The jQuery documentation on how to use those parameters isn't the best, as none of the examples use it to its full capabilities. Here's an example using the progress function, but hopefully you can adapt this to whatever your needs are: -
$("#book")
.slideToggle({
duration: 400,
progress: functionToExecute,
complete: function () {
console.log('animation completed');
}
});
function functionToExecute(animation, progress, remainingMs) {
$('p').text('here and progress count is ' + progress);
}
.wrap {
height: 100px;
width: 200px;
margin: 10px 10px 10px 10px;
background-color: #2d8cd0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap" id="book">
<h2>1</h2>
</div>
<p>Progress: <span id="progress">0</span></p>
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>
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 want to use jQuery to achieve multiple effects. When an user click on an element, this calls a set of functions inside that click handler. Is there a way in jQuery to have a delay between each action executing in the function?
Example would be:
$(function() {
$('.activator').on('click', function() {
$(this).toggleClass('animated');
$('.app').css('background',$(this).css('background'));
});
})
Instead of having the activator element perform the animation it receives from the class, and then the app receiving the background, they both happen at the same time and the animation can't even be seen. How can one set a delay between the two, or multiple?
Thanks!
If it's a CSS animation then you need to set an event for animationend / transitionend
$('.activator').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$('.app').css('background',$(this).css('background'));
});
$('.activator').on('click', function() {
$(this).toggleClass('animated');
});
Demo
$('.activator').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
$('.app').css('background', $(this).css('background'));
});
$('.activator').on('click', function() {
$(this).toggleClass('animated');
});
.activator {
transition: all 1s;
width: 200px;
height: 50px;
background: red;
}
.activator.animated {
height: 500px;
}
.app {
width: 32px;
height: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="app"></div>
<div class="activator">Click me</div>
If it is a jQuery animation you would use one of the callback options, like complete, or pass a callback function as the last argument.
jQuery("div").animate({width:"500"},{
complete:function(){
$('.app').css('background', $(this).css('background'));
}
});
//Or
jQuery("div").animate({width:"500"},function(){
$('.app').css('background', $(this).css('background'));
});
There's JavaScript built-in function setTimeout() for delaying an action.
Have you tried using .delay() before the animation?
$(this).delay(500).toggleClass('animated');
I'm new to frond end development, and unfortunately have some issues calling a JavaScript function.
I have following function:
<script type="text/javascript">
$(document).ready(function () {
$("#table_div").scroll(function () {
alert("test successful");
jQuery('#divHeader').scrollLeft(jQuery('#table_div').scrollLeft());
jQuery('#firstcol').scrollTop(jQuery('#table_div').scrollTop());
jQuery('#lastcol').scrollTop(jQuery('#table_div').scrollTop());
});
});
</script>
and HTML is defined as:
<div id="divHeader" class="firstpanel">
<div id="firstcol" class="firstcolumn">
<div id="table_div" class="contentpanel">
which is styled as:
.contentpanel {
overflow: scroll;
width: 300px;
height: 500px;
position: relative;
}
.firstpanel {
overflow: hidden;
width: 284px;
}
.firstcolumn {
overflow: hidden;
height: 500px;
}
and I'm experiencing a problem, since the "alert" in my JavaScript function is not triggered, when I debug my application. I have made a test in JSFiddle with exacly the same code, and it works very well, since the alert function is called, once I start scrolling my div.
I'm using JQuery 1.5.1 in my application and will prefer to prevent using a newer version in JQuery. Is the JQuery version the issue in this case ?.
You are attaching the event when the element is not render by DOM. You should wrap that code in a $(document).ready() or use delegation events:
$(document).on('scroll', "#table_div", function () {
// code
});
I want to hover all div under .wrapper div in order with a delay when the page is loaded. How can I do this with using jquery?
HTML
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Jquery
$('.wrapper').children().each(function(){
$(this).trigger('hover');
});
https://jsfiddle.net/drxvr1hn/
.trigger('hover') has been deprecated as it caused a great deal of maximum stack exceeded errors.
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
Trying to trigger the hover state via jQuery is a very browser/cpu intensive process and a lot of re-rendering of a page to ensure that your call is correct. Therefore the ability was removed but is possible with some JS but will almost certainly cause speed issues and/or stack issues which can cause browser crashes.
A good alternative would be to use classes like below:
$(document).ready(function() {
$('.wrapper div').on('mouseover', function() {
$('.wrapper div').addClass('hover');
}).on('mouseleave', function() {
$('.wrapper div').removeClass('hover');
});
});
.wrapper > div {
width: 100%;
height: 20px;
margin-bottom: 20px;
}
.first {
background-color: #468966;
}
.second {
background-color: #FFF0A5;
}
.third {
background-color: #FFB03B;
}
.first.hover {
background-color: #B64926;
}
.second.hover {
background-color: #8E2800;
}
.third.hover {
background-color: #464A66;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
you need to set the timeOut interval
$(window).scroll(function() {
$('. wrapper'). children().each(function(index){
var _this = this;
setTimeout( function(){ $(_this).trigger('hover'); }, 200*index);
});
});