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>

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>

check the pointer position on an element in jquery

I have this simple reveal caption on hover animation using jquery, I am using hover and animate in jquery. Everything is working fine except in one case - when the hovering on image animation is done and the caption is revealed, if the mouse pointer was on the revealed caption the hovering out animation starts, assuming I hovered out of the image ... so i want to check if the mouse pointer is on the image itself or on the caption before applying the hovering out handler.
edited here is the markup
$( ".img-1" ).hover(function() {
$( ".cap-1" )
.animate({ "opacity": "1" }, 100 )
.animate({ "top": "-=50%" }, 200 )
.animate({ "top": "+=10%" }, 200 );
}, function() {
$( ".cap-1" )
.animate({ "top": "+=40%" }, 300 )
.animate({ "opacity": "0" }, 100 );
});
.img-1 {
width: 100%;
height: 400px;
background-color: rgba(0,0,0,0.4);
}
.friends-caption {
position: absolute;
width: 79.5%;
height: 37%;
top: 99%;
bottom: 0px;
left: 20px;
right: 0px;
background-color: rgba(102, 102, 102, 0.7);
border: none;
font-size: 16px;
font-family: inherit;
text-align: center;
color: #fff;
padding-top: 8%;
opacity: 0;
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-sm-2 col-sm-offset-1">
<img src="images/awn1.jpg" class="img-thumbnail img-1">
<p class="friends-caption cap-1">Costa Cafe</p>
</div>

http://liveweave.com/C8NNC6
http://jsfiddle.net/zwzoresL/
Why not just apply the hover on the container instead of the image?
$('.col-sm-2').hover(function () {
$( ".cap-1" )
.animate({
"opacity": "1",
"top": "-=75%"
}, 300 )
.animate({
"top": "+=25%"
}, 200 );
}, function () {
$( ".cap-1" )
.animate({
"top": "+=50%",
"opacity": "0"
}, 300 );
});
.img-1 {
width: 100%;
height: 50%;
background: rgb(0,0,0);
background: rgba(0,0,0,0.4);
}
.friends-caption {
position: absolute;
height: 25%;
top: 384px;
left: 10%;
right: 10%;
background: rgb(102, 102, 102);
background: rgba(102, 102, 102, 0.7);
border: none;
font: 16px inherit;
text-align: center;
color: #fff;
padding-top: 16px;
cursor: default;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-2 col-sm-offset-1">
<img src="images/awn1.jpg" class="img-thumbnail img-1">
<p class="friends-caption cap-1">Costa Cafe</p>
</div>

The simplest solution to your problem would be to add a pointer-events property to your .friends-caption css rule:
.friends-caption {
/* existing rules */
pointer-events: none;
}
This will prevent mouse events from triggering from the caption element (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).
However, this solution might not have the cross-browser compatibility that you desire. In that case, I think we can do the following to achieve a solution in JavaScript / jQuery:
First, for better organization, let's move the animate steps into their own functions:
var animateIn = function () {
$('.cap-1' )
.animate({ "opacity": "1" }, 100 )
.animate({ "top": "-=50%" }, 200 )
.animate({ "top": "+=10%" }, 200 );
};
var animateOut = function () {
$('.cap-1')
.animate({ "top": "+=40%" }, 300 )
.animate({ "opacity": "0" }, 100 );
};
We can attach the hover event to the .cap-1 element as well as the .img-1 because we want to know when the mouse has entered either element. Next, we need to use a setTimeout in our unhover handler because we want time to track if the mouse has moved from one of our targeted elements to the other -- if it has, we can clear our timeout, cancelling our animateOut call. Lastly, we will need to track whether our caption is in the "in" state so that we don't allow it to animate in when it is aleady in, or out when it is already out (which would cause the caption to repeatedly jump up or down our page):
var hover_timeout;
var caption_is_in;
$('.img-1,.cap-1').hover(function () {
if ('number' === typeof hover_timeout) {
clearTimeout(hover_timeout);
}
if (!caption_is_in) {
caption_is_in = true;
animateIn();
}
}, function () {
hover_timeout = setTimeout(function () {
if (caption_is_in) {
caption_is_in = false;
animateOut();
}
}, 50);
});
I have created a fiddle which can be found at: http://jsfiddle.net/76484/sqyc0b61/.
EDIT:
I have realized that my solution is incomplete because the caption can still trigger the hover event when it is in its "out" state. To fix this, we could add a 'container' class to the element that contains the image and caption and add the following css rule:
.container {
position:relative;
overflow:hidden;
}
Updated fiddle: http://jsfiddle.net/76484/sqyc0b61/1/

Light box pop up form in jquery

Here is my code:
Please fill out my form.
<script>
var test = document.getElementById('test');
var win = null;
test.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
win = window.open(test.href, null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
return false;
});
window.addEventListener('click', function(e) {
if(win != null) {
win.close();
win = null;
}
});
</script>
This code works fine, but i need like to display as light box, for example please refer this site, http://fancybox.net/ ,, I am new to javascript, can anyone one help me to do this,
Any help would be appreciated, Thank you.

To start working with javascript, you would need a javascript library API. You must have heard about JQuery, this makes your work easier than regular Javascript codes. JQuery have lots of plugins especially for lightbox gallery that you are looking for. One useful lightbox plugin is Colorbox.
Start by importing the libraries to your header just like below. You also might need some css files for the colorbox themes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="../jquery.colorbox.js"></script>
Then start using colorbox just like below
Please fill out my form.
$(document).ready(function(){
$("#test").click(function(){ //on clicking the link above
$(this).colorbox({ //this would capture the url from the href
width:'500px', //width of the colorbox
height:'auto', //height of the colorbox
initialWidth:'500px', //initial width upon loading
initialHeight:'auto', //initial height upon loading
speed:0, //animation speed
opacity:0.2, //background opacity
overlayClose: true, //close upon clicking anywhere
title:'Your Form Title', //your form title name
onComplete: function(){
//do something when the colorbox loaded completely
}
});
})
});

Take a look on this following example. This is custom light box without any plugin:
Updated Fiddle
jQuery:
var lightBox = $('#lightbox'),
lightBoxContent = $('#lb-content');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 148,
lbContent = $('#lb-content');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() + 50 + 'px'
});
};
$('#test').click(function(e) {
e.preventDefault();
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
/*hide click outside*/
$(document).mouseup(function (e)
{
if (!lightBoxContent.is(e.target) // if the target of the click isn't the container...
&& lightBoxContent.has(e.target).length === 0) // ... nor a descendant of the container
{
lightBox.hide();
lightBoxContent.hide();
}
});
CSS:
body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
text-align: center;
display: none;
}
#lb-content {
color: #222;
height: 150px;
width: 260px;
border: 16px solid #222;
background-color: #fff;
position: relative;
text-align: center;
padding-top: 10px;
border-radius: 4px;
display: none;
}
#lb-close {
display: block;
height: 22px;
width: 25px;
background-color: red;
color: #fff;
position: absolute;
top: -25px;
right: -25px;
cursor: pointer;
text-align: center;
border-radius: 10px;
}
You can go for jQuery Plugin also:
http://lokeshdhakar.com/projects/lightbox2/
http://dimsemenov.com/plugins/magnific-popup/
http://www.jacklmoore.com/colorbox/

How to control animate function on button click?

I have two divs named "arrow" and "inner". I am trying to control the animate slide function when the div is clicked but have been unfortunate. The issue is noticeable when clicking very fast on the "arrow" div after user stops clicking the div is still sliding. I set the animate function under a small delay but I still experience lag. Here is my example code:
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script language="javascript">
$(document).ready(function() {
var out = 0;
$("#arrow").click(function(){
if(out==0)
{
$("#inner").animate({marginRight: "0px"}, 500 );
out=1;
}
else
{
$("#inner").delay(400).animate({marginRight: "-100px"}, 500 );
out=0;
}
});
});
</script>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
<div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>
<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>

Just change your code
$("#inner").animate({marginRight: "0px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
and
$("#inner").animate({marginRight: "-100px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
Please see following Link for example : http://jsfiddle.net/UAYTw/1/
you can also use $("#inner").stop(true, false).animate() instead of $("#inner").stop(true, true).animate(). as per your choice.

Using Ravi's code props to him - toggle is cleaner in my opinion
DEMO
$(document).ready(function() {
$("#arrow").toggle(
function(){
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
},
function(){
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
}
);
});

You can use .animate().stop() method to stop the animation.
Demo: http://jsfiddle.net/YKn7c/

this may help:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
function () {
$("#effect").stop().animate({ opacity: '0', height: '130' }, 300);
}
);
edited:
If You dont want to be closed:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
null
);