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>
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>
So I get my text blinking and would I like it to stop after a few seconds.
Here is a Fiddle example where I would like to change the mouse enter action with a timer or something, but I don't know what.
var p = $("p");
p.blinker({
timeHidden: 50,
intervalRangeStart: 100,
intervalRangeStop: 500
});
p.bind("mouseenter", function(){
$(this).data("blinker").pause();
});
body {
background-color: #111;
padding: 50px;
font-family: Arial;
font-weight: bold;
}
p {
font-size: 100px;
color: #ececec;
}
<p>Hello there!</p>
You could use setTimeout
setTimeout(function() {
$(this).data("blinker").pause();
}, 5000);
Thanks gabesoft for your response! I was sure it was something doing with a setTimeout but I was struggling because there were not only one <p> element…! Here is the code working fine (with the jQuery blinker addon):
$("p").blinker({
timeHidden: 25,
intervalRangeStart: 50,
intervalRangeStop: 200
})
setTimeout(function() {
$(p).each(function(index, value) {
$(this).data("blinker").pause();
});
}, 2000);
I need to make an "Add to favs" button that would toggle between "Add" and "Added" states. The trick is that when in "Added" state, I want it to have a hover behaviour like all red and saying "Remove from favs". BUT when you click the button for the 1st time and it changes to "Added", I don't want the 'remove' style turn on immediately.
My solution is to create 2 classes: .isChecked and .isJustPressed. The first is used to determine the button actual state and the second is used to apply the "remove from favs" hover styling only after the mouseleave event.
These classes are handled by jQuery. I am quite new to the language, so I've come up with such working solution (see below). The CSS is simplified. Well the reason I posted this is that I feel there must be a more elegant way to solve this. And besides, I don't like my jQuery code, so I'd appreciate any comments there also
$('.fav_btn').click(function(event) {
$(this).addClass('isJustPressed');
$(this).toggleClass('isChecked');
$(this).html(function() {
return $('.fav_btn').hasClass('isChecked') ? 'Added' : 'Add to favourites';
});
});
$('.fav_btn').on('mouseleave', function(event) {
if ( $(this).hasClass('isChecked')){
$('.fav_btn').removeClass('isJustPressed');
}
});
$('.fav_btn').hover(
function() {
if ($('.fav_btn').hasClass('isChecked') && !$('.fav_btn').hasClass('isJustPressed')){
$('.fav_btn').html('Remove from favourites');
}},
function(){
if ($('.fav_btn').hasClass('isChecked') && !$('.fav_btn').hasClass('isJustPressed')){
$('.fav_btn').html('Added');
}});
.fav_btn {
position: relative;
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: lightblue;
}
.fav_btn:hover{
background-color: blue;
color: #fff;
}
.fav_btn.fav_btn.isChecked.isJustPressed:hover{
background-color: blue;
color: #fff;
}
.fav_btn.isChecked {
background-color: #fff;
}
.fav_btn.isChecked:hover{
background: pink;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="fav_btn">Add to fav</div>
</body>
I'm not sure if this is what you are looking for but, I rewrote your solution with more method chaining, and abstraction:
HTML:
<div class="fav_btn">Add To Favs</div>
JS:
//Moved btn text into variable so it can be changed more easily
var btn_text = {
default: "Add To Favs",
added: "Selection Added",
remove: "Remove Selection"
}
$('.fav_btn')
//set initial text and classes
.removeClass('remove added')
.html(btn_text.default)
//The click toggles the 'default' and 'added' states
.on('click', function(e) {
//Toogle the 'added' class
$(this).toggleClass('added');
//Swap the text
if ($(this).is('.added')) {
$(this).html(btn_text.added);
} else {
$(this)
.removeClass('remove added')
.html(btn_text.default)
}
})
.on('mouseover', function(){
//If it has the 'added' class...add the 'remove' text
if ($(this).is('.added')) {
$(this)
.addClass('remove')
.html(btn_text.remove)
.on('mouseout', function() {
//Get rid of the 'remove' class
$(this).removeClass('remove');
//Swap out the 'remove' text
if ($(this).is('.added')) {
$(this).html(btn_text.added);
} else {
$(this).html(btn_text.default);
}
});
}
});
CSS:
.fav_btn {
padding: 5px;
background-color:blue;
color: white;
}
.fav_btn:hover {
background-color: lightblue;
}
.fav_btn.remove:hover {
background-color: pink;
}
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/