Develop Reference

How do I use throttle with .hover(); jQuery?

I'm trying to find the most concise way to throttle a hover function with jQuery. There are many examples of this but they all seem to not work as intended. For example the use of $.throttle doesn't error but it stops the animation from working altogether. This is the code which I'm trying to throttle:
jQuery(document).ready(function($){
var $navTab = $('.nav-tab-parent');
function moveNavTab(e) {
TweenLite.to($navTab, 0.3, {
css: {
left: e.pageX,
top: e.pageY
}
});
}
$(window).on('mousemove', moveNavTab);
$(".toggle-bars").hover( // this is the .hover() function I need to throttle.
function() {
$(".nav-tab-parent").animate({
opacity: 1
});
$(".nav-tab-parent").delay(10).animate({
width: "36px",
easing: "swing"
});
$(".nav-tab").html("MENU");
$(".nav-tab").delay(350).animate({
opacity: 1
});
}, function() {
$(".nav-tab").animate({
opacity: 0
});
$(".nav-tab-parent").delay(150).animate({
width: "0",
opacity: 0,
easing: "swing"
});
}
);
});
I must be missing something here but can't figure it out. Any help in achieving this would be greatly appreciated!

Changed to use entirely GSAP and relying on .timescale() see the documentation — didn't know the underlying structure so will need some configuring but the basis is there. GSAP has a crazy deep documentation but should be familiar enough to jquery with object animations.
var tl = gsap.timeline().timeScale(-1);
tl.fromTo(".nav-tab-parent", {
autoAlpha: 0,
duration: 1
}, {
autoAlpha: 1,
duration: 1
});
$(".toggle-bars").hover(function() {
tl.timeScale(1);
}, function() {
tl.timeScale(-1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-bars">.toggle-bars
<div class="nav-tab-parent">.nav-tab-parent</div>
</div>

I suppose you are trying to achieve something like this. You could try to use .stop() method - it will stop current animation and after that you can run next one. Try to play with arguments to choose what best will suit your case.
let $hover = $('.hover-box'),
$target = $('.animated-box');
function show() {
$target.stop(true, true).animate({
opacity: 1,
})
}
function hide() {
$target.stop(true, true).animate({
opacity: 0
})
}
$hover.hover(show, hide)
.hover-box,
.animated-box {
width: 100px;
height: 100px;
border-radius: 8px;
}
.hover-box {
border: 1px solid #ddd;
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-family: sans-serif;
cursor: pointer;
margin-bottom: 16px;
}
.hover-box:hover {
background: #ddd;
}
.animated-box {
opacity: 0;
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hover-box'>Hover</div>
<div class='animated-box'></div>

Making A follow button With Javascript

I'm here to get answers to why my javascript isn't working for the follow button because I add all cdn and scripts but still not working. What am I doing wrong in my code?
$(document).ready(function(){
$("#follow-button").click(function(){
if ($("#follow-button").text() == "+ Follow"){
// *** State Change: To Following ***
// We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms
$("#follow-button").animate({ width: '-=10px' }, 100, 'easeInCubic', function () {});
// then now we want the button to expand out to it's full state
// The left translation is to keep the button centred with it's longer width
$("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'easeInOutBack', function () {
$("#follow-button").css("color", "#fff");
$("#follow-button").text("Following");
// Animate the background transition from white to green. Using JQuery Color
$("#follow-button").animate({
backgroundColor: "#2EB82E",
borderColor: "#2EB82E"
}, 1000 );
});
}else{
// *** State Change: Unfollow ***
// Change the button back to it's original state
$("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'easeInOutBack', function () {
$("#follow-button").text("+ Follow");
$("#follow-button").css("color", "#3399FF");
$("#follow-button").css("background-color", "#ffffff");
$("#follow-button").css("border-color", "#3399FF");
});
}
});
});
#follow-button {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
width: 85px;
height: 30px;
position: absolute;
top: 50px;
left: 50px;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>
Is there a solution to fix this type of error? I tried google but no answers. I thought you guys could help.
Thanks for all the help!

Some issues in your codes:
easeInOutBack is not defined, so uses built-in easing function=linear or swing instead
$("#follow-button").css("color", "#fff"); will cause text and background are same color, so uses #2EB82E instead.
You can check the details for JQuery animate().
After fix them, the codes will be like below:
$(document).ready(function(){
$("#follow-button").click(function(){
if ($("#follow-button").text() == "+ Follow"){
// *** State Change: To Following ***
// We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms
$("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {});
// then now we want the button to expand out to it's full state
// The left translation is to keep the button centred with it's longer width
$("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () {
$("#follow-button").css("color", "#2EB82E");
$("#follow-button").text("Following");
// Animate the background transition from white to green. Using JQuery Color
$("#follow-button").animate({
backgroundColor: "#2EB82E",
borderColor: "#2EB82E"
}, 1000 );
});
}else{
// *** State Change: Unfollow ***
// Change the button back to it's original state
$("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'linear', function () {
$("#follow-button").text("+ Follow");
$("#follow-button").css("color", "#3399FF");
$("#follow-button").css("background-color", "#ffffff");
$("#follow-button").css("border-color", "#3399FF");
});
}
});
});
#follow-button {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
width: 85px;
height: 30px;
position: absolute;
top: 50px;
left: 50px;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>

You need to use jQuery's html() function, as text() doesn't do what you think it should do - http://api.jquery.com/text/
$("#follow-button").html("Following");

if ($("#follow-button").text() == "+ Follow")
You're comparing the button text with "+ Follow" yet your button text is just "Follow" so your if block will never run.
Also see Adam's answer for the correct way to get/set the contents of your button.

The easings you are using are not defined, and that is why you are getting the error.
Please check jQuery Easings Main Page for more info.
I have fixed your error, but I guess your code still needs some improvements style and coloring wise.
$(document).ready(function(){
$("#follow-button").click(function(){
if ($("#follow-button").text() == "+ Follow"){
// *** State Change: To Following ***
// We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms
$("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {});
// then now we want the button to expand out to it's full state
// The left translation is to keep the button centred with it's longer width
$("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () {
$("#follow-button").css("color", "#fff");
$("#follow-button").text("Following");
// Animate the background transition from white to green. Using JQuery Color
$("#follow-button").animate({
backgroundColor: "#2EB82E",
borderColor: "#2EB82E"
}, 1000 );
});
}
else{
// *** State Change: Unfollow ***
// Change the button back to it's original state
$("#follow-button").animate({
width: '-=25px',
left: '+=15px'
}, 600, 'linear', function () {
$("#follow-button").text("+ Follow");
$("#follow-button").css("color", "#3399FF");
$("#follow-button").css("background-color", "#ffffff");
$("#follow-button").css("border-color", "#3399FF");
});
}
});
});
#follow-button {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
width: 85px;
height: 30px;
position: absolute;
top: 50px;
left: 50px;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>

Hover and Click Jquery

I have a link with an hover effect.
When you hover it, the text become red and underlined.
When you click it, the text stay red and underlined.
My problem is that once you clicked on the link, the hover effect still play... But I do not want this effect.
(I don't use toggle, because it's not supported by the last Jquery : 1.9)
HERE'S MY JS FIDDLE
$("h1").addClass("clicked")
$('h1').click(function() {
if($(this).hasClass("clicked")) {
$("span").animate({"width": "145px"}, 300);
$("h1").css({"color": "red"}, 300);
$(this).removeClass("clicked");
} else {
$("span").animate({"width": "0"}, 300);
$("h1").css({"color": "black"}, 300);
$(this).addClass("clicked");
}
});
$('h1').hover(function() {
if($(this).hasClass("clicked")) {
$("span").stop().animate({"width": "145px"}, 300);
$("h1").css({"color": "red"}, 300);
$(this).removeClass("clicked")
} else {
$("span").stop().animate({"width": "0"}, 300);
$("h1").css({"color": "black"}, 300);
$(this).addClass("clicked");
}
});

If I didn't misunderstand your question you want to:
Hover to make it red and underline
Click to make it always red and underlined
Click again to enable hover red again
Following part of your code needed changes. hover can take two functions one for onmouseover other for onmouseleave and it becomes like:
$('h1').hover(function() {
if ($(this).hasClass("clicked")) {
return;
}
$("span").stop().animate({
"width": "145px"
}, 300);
$("h1").css({
"color": "red"
}, 300);
}, function() {
if ($(this).hasClass("clicked")) {
return;
}
$("span").stop().animate({
"width": "0"
}, 300);
$("h1").css({
"color": "black"
}, 300);
});
I modified your jsfiddle assuming above points. If you move mouse over, it gets red; take away mouse, goes black, and click to make it always red.

You can unbind events with the unbind jQuery method.
$('h1').click(function() {
$(this).unbind('mouseenter mouseleave');
...
}

I update your fiddle click here
use this query in click function
$(this).off('hover');

easiest way with css and jquery
$('h1').click(function() {
if($(this).hasClass("clicked")) {
$(this).removeClass("clicked");
} else {
$(this).addClass("clicked");
}
});
span {
border-bottom: 5px solid red;
height: 0px;
margin-top: 40px;
left:10px;
width: 0;
position: absolute;
display: inline-block;
transition: width 0.3s;
}
h1{
color: black;
transition: all 0.3s;
}
h1:hover{
color: red;
}
h1:hover span{
width: 145px;
color: red;
}
h1.clicked{
color: red;
}
h1.clicked span{
width: 145px;
color: red;
}
<h1>
MY TEXT <span></span>
</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

Toggling divs to slide at certain times

Please see this fiddle http://jsfiddle.net/rabelais/6bt70uhj/9/
$('#name-a').click(function() {
$('#bio-line-1').animate({width: 'toggle'});
window.setTimeout(function (){$('#bio-line-2').slideToggle( "slow" ); }, 300);
When clicking the link the first lines slides in from the left, and then when that is finished the second line slides in from the top. When it slides back to be hidden, the first line slides aways before the second line does.
How can I change it so the second line slides away before the first line slides away?

$('#name-a').click(function () {
if ($('#bio-line-1').css('display') == 'none') {
$('#bio-line-1').animate({ width: 'toggle' });
window.setTimeout(function () {
$('#bio-line-2').slideToggle("slow");
}, 300);
}
else {
$('#bio-line-2').slideToggle("slow");
window.setTimeout(function () {
$('#bio-line-1').animate({ width: 'toggle' });
}, 300);
}
});
DEMO

I think this is what you want:
$('#name-a').click(function () {
window.setTimeout(function () {
$('#bio-line-2').slideToggle("slow", function () {
$('#bio-line-1').animate({
width: 'toggle'
});
});
}, 300);
});
Demo: https://jsfiddle.net/tusharj/6bt70uhj/11/

I think you can do
var $l2 = $('#bio-line-2'),
$l1 = $('#bio-line-1');
var $a = $('#name-a').click(function() {
$a.toggleClass('visible');
var visible = $a.hasClass('visible'),
$f = visible ? $l1 : $l2,
$s = visible ? $l2 : $l1;
$f.animate({
width: 'toggle'
});
window.setTimeout(function() {
$s.slideToggle("slow");
}, 300);
});
#name-a {
left: 38px;
position: fixed;
top: 38px;
z-index: 1;
}
#bio-line-1 {
left: 150px;
position: fixed;
top: 35px;
width: 633px;
z-index: 1;
}
#bio-line-1 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
#bio-line-2 {
left: 150px;
margin-top: 20px;
position: fixed;
top: 38px;
width: 633px;
z-index: 1;
}
#bio-line-2 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="name-a">
John Love
</div>
<div id="bio-line-1" class="hidden">
<p>holds a Master's Degree from the University of the Arts</p>
</div>
<div id="bio-line-2" class="hidden">
<p>London and currently works in London.</p>
</div>

$('#name-a').click(function() {
if($("#bio-line-2").is(":visible")){
window.setTimeout(function (){
$('#bio-line-1').animate({width: 'toggle'});
}, 300);
$('#bio-line-2').slideToggle( "slow" );
}
else{
window.setTimeout(function (){
$('#bio-line-2').slideToggle( "slow" );
}, 300);
$('#bio-line-1').animate({width: 'toggle'});
}
});

i have made some condition that while showing the lines, line number 1 will appear first and then line number 2 will appear. and while hiding lines, line number 2 will hide first and then line number 1 will hide... i think this is what you trying
Here is fiddle link
Thank You

I'd do something like this. I would also not use a setTimeout as it is not a reliable way to trigger consecutive animations. The timer can trigger at different times depending on what is happening in the UI thread and therefore ruining the effect you are trying to create. You should use the animate success callback of each animation in order to trigger the next one at the exact right time.
http://jsfiddle.net/6bt70uhj/23/
var $line1 = $('#bio-line-1'),
$line2 = $('#bio-line-2');
$('#name-a').click(function() {
if (!$line1.is(":visible")) {
$line1.animate({
width: 'toggle'
}, 300, function () {
$line2.slideToggle("slow");
});
} else {
$line2.slideToggle("slow", function() {
$line1.animate({
width: 'toggle'
});
});
}
});

Text slideshow with jQuery not functioning correctly when there's <br>

I'm trying to create a simple text slideshow which transits between a phrase to another and loop itself but when I added a break rule to the text, the slideshow doesn't seem to function correctly. It only works when the text is a single line. Your assistance would be greatly appreciated.
Here's the code and jsFiddle: http://jsfiddle.net/rezasan/fnbn8sbc/
//HTML
<div id="index_splashtext">
<h3>An<br/>Intimate<br/>Hideaway</h3>
<h3>A<br/>Paradise<br/>Preserved</h3>
</div>
//CSS
#index_splashtext {
width:311px;
margin:0 auto;
height: 330px;
margin-top: 25px;
text-align:center;
}
#index_splashtext h3 {
position: absolute;
font-size: 4.5em;
line-height: 1.2em;
font-family: "adobe-garamond-pro",sans-serif;
letter-spacing: 0.05em;
font-weight: 400;
margin-bottom: 70px;
color: red;
}
//jQuery
$(function(){
$('#index_splashtext h3:gt(0)').hide();
setInterval(function(){
$('#index_splashtext :first-child').fadeOut(2500)
.next('h3').fadeIn(2500)
.end().appendTo('#index_splashtext');},
8000);
});

You want to use $('#index_splashtext h3:first') instead of $('#index_splashtext :first-child'). In this case, :first-child is also being applied to the <br /> elements, so they get hidden but never faded back in:
$(function () {
$('#index_splashtext h3:gt(0)').hide();
setInterval(function () {
$('#index_splashtext h3:first').fadeOut(2500)
.next('h3').fadeIn(2500)
.end().appendTo('#index_splashtext');
},
8000);
});
jsFiddle example

well this is how i achieved your desired effect, and it is scalable too :)
html:
<div id="index_splashtext">
<h3></h3>
</div>
javascript:
$(function(){
var messages=[];
var counter=0;
var fadeInLength = 2500;
var fadeOutLength = 2500;
var hold = 1000;
messages.push('An<br />Intimate<br />Hideaway');
messages.push('A<br />Paradise<br />Preserved');
$('#index_splashtext h3').hide();
setInterval(function(){
$('#index_splashtext :first-child').
html(messages[counter]).
fadeIn(fadeInLength).
delay(hold).
fadeOut(fadeOutLength);
counter++;
if(counter > messages.length-1){counter=0;}
},fadeInLength+fadeOutLength+hold + 1000);
});