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/
Related
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>
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>
I've got a simple empty HTML div:
<div id="spaceTrainingImages"></div>
I am adding images dynamically to it:
// adds the images to the img div
imgContainerSpace = $("#spaceTrainingImages");
for (var i = 1; i <= numStimuli; i++) {
imgContainerSpace.append(
$("<img>", {
id: "spaceTrainingImg" + i,
src: numToPath(i),
style: "width:30px;height:40px",
"class": "spaceTrainingPic"
})
);
};
Moreover, I change the dimension of each img as the mouse hovers over it.
// deals with size change on mouse over
$(".spaceTrainingPic").hover(function() {
// img gets three times bigger
$(this).css({
"width": "90px",
"height": "120px",
});
}, function() {
// img returns to original size
$(this).css({
"width": "30px",
"height": "40px",
});
});
I would like the imgs to be at the center of the div and remain there:
#spaceTrainingImages {
position: relative;
height: 120px;
background-color: snow;
}
.spaceTrainingPic {
position: relative;
top: 50%;
transform: translateY(-50%);
}
This works whenever the mouse is not hovering over any image. However, whenever I hover over an image, all the other images move. Their top becomes the bottom of the image being hovered (which becomes bigger).
I am not sure what might be causing this.
EDIT: I had forgotten to mention that I do want the imgs to move to the sides when the hovered over image gets bigger, I just don't want them to move vertically.
You can use transform scale() instead of changing height and width value.
As I see you are changing values 30 to 90 and 40 to 120 which is 3 times of original value so use transform: scale(3);
$(".spaceTrainingPic").hover(
function() {
// img gets three times bigger
$(this).css({
"transform": "scale(3) translateY(-50%)"
});
},
function() {
// img returns to original size
$(this).css({
"transform": "scale(1) translateY(-50%)"
});
});
$(document).ready(function() {
imgContainerSpace = $("#spaceTrainingImages");
for (var i = 1; i <= 5; i++) {
imgContainerSpace.append(
$("<img>", {
id: "spaceTrainingImg" + i,
src: 'https://www.jquery-az.com/html/images/banana.jpg',
style: "width:30px;height:40px",
"class": "spaceTrainingPic"
})
);
};
$(".spaceTrainingPic").hover(function() {
$(this).css({
"transform": "scale(3) translateY(-16.666667%)",
"z-index": "1"
});
$(this).next("img").css({
"margin-left": "30px",
});
}, function() {
$(this).css({
"transform": "scale(1) translateY(-50%)"
});
$(this).next("img").css({
"margin-left": "0px",
});
});
});
#spaceTrainingImages {
position: relative;
height: 120px;
background-color: snow;
}
.spaceTrainingPic {
position: relative;
top: 50%;
transform: translateY(-50%);
transition: all .3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spaceTrainingImages"></div>
this can be done quite simply without so much javascript and just pure css.
First when you foreach create div and inside append the image.
This div can have class img-wrapper with
.img-wrapper {
width: 30px;
height: 40px;
overflow:hidden;
}
.img-wrapper img {
width: 100%;
height: auto;
transition: all 0.3s linear;
}
.img-wrapper:hover img {
transform: scale(1.2);
}
So basically
You need something like this
<div id="spaceTrainingImages">
<div class="img-wrapper">
your img here
</div>
<div class="img-wrapper">
your img here
</div>
<div class="img-wrapper">
your img here
</div>
</div>
There is a transform property in CSS which helps to ZOOM the element content without disturbing the others. Take a look at below
$(document).ready(function() {
// adds the images to the img div
imgContainerSpace = $("#spaceTrainingImages");
for (var i = 1; i <= 5; i++) {
imgContainerSpace.append(
$("<img>", {
id: "spaceTrainingImg" + i,
src: 'https://www.jquery-az.com/html/images/banana.jpg',
style: "width:30px;height:40px",
"class": "spaceTrainingPic"
})
);
};
// deals with size change on mouse over
$(".spaceTrainingPic").hover(
function() {
// img gets three times bigger
$(this).css({
"transform": "scale(3)",
"z-index":"1"
});
},
function() {
// img returns to original size
$(this).css({
"transform": "scale(1)"
});
});
})
#spaceTrainingImages {
position: relative;
height: 120px;
background-color: snow;
}
.spaceTrainingPic {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spaceTrainingImages"></div>
Hope this helps
I think you would be better of using the tranform css property.
$(".spaceTrainingPic").hover(
function () {
// img gets three times bigger
$(this).css({
"transform": "scale(3)"
});
}, function () {
// img returns to original size
$(this).css({
"transform": "scale(1)"
});
});
You could also do this with pure css
.spaceTrainingPic:hover {
transform: scale(3);
}
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'
});
});
}
});
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
);