jQuery mouseenter and mouseleave fadeTo prevent delayed repeat - javascript

So, I've got a div which fades up on mouse enter and down on mouseleave which works fine.
$('.myDiv').mouseenter(function(){
$(this).fadeTo('slow', 1);
});
$('.myDiv').mouseleave(function(){
$(this).fadeTo('slow', 0.4);
});
See jsfiddle .
However, if you quickly move the mouse over and back and again several times, the div will "flash" as the animation keeps running. Is there a way to stop this from occurring?
I've tried callbacks but haven't got the desired effect.
Any suggestions?

Try:
$('.myDiv').mouseenter(function(){
$(this).stop();
$(this).fadeTo('slow', 1);
});
$('.myDiv').mouseleave(function(){
$(this).stop();
$(this).fadeTo('slow', 0.4);
});
https://jsfiddle.net/1Lrcubwp/

A better way is to use CSS.
Javascript shouldn't be used for this kind of animation as it will make your website slow.
See my example below.
.fade {
background-color: red;
width: 200px;
height: 200px;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
cursor: pointer;
}
.fade:hover {
opacity: 1;
}
<div class='fade'></div>

Related

How to solve opacity issue on mouseenter and mouselieave from a menu?

I have a menu on the top of a page, I need an overlay at the background with black color and and opacity = 0.7, this "overlay" has to appear at li:hover (mouseenter) and disappear at mouseleave. This is what I've done so far jsfiddle and this is the fullscreen result
What I got:
mousenter works well.
mouseleave issue, the overlay appears and disappear everytime the mouse leave (it seems a party flashing div), I know is logic, but what can I do?
If I comment some lines in the code I see what I want but the overlay stays visible.
function iniciarmenu() {
$(".menu-links ul li").hover(
function () {
$(".overlay").animate({
opacity: 0.7
}, 'fast');
},
function () {
/*$(".overlay").animate({
opacity: 0
}, 'fast');*/
});
}
I hope you can help me. Thanks!
You need to stop the current animation first.
$(".overlay").stop( true, true ).animate( { … } );
See: http://api.jquery.com/stop/
You could also use CSS to achieve that effect:
.overlay:hover {
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}

jquery background color fade in on scroll

I want the background of the header to fade in after a number of pixel scrolled. With the code below i kinda get it but not much right! Any idea? thanks!
$(function () {
$(window).scroll(function () {
$(document).scrollTop() > 100 ? $('header').css({
"background": 1
}).fadeIn() : $('header').css({
"background": 0
}).fadeOut();
});
})
A combination of Miquel Las Heras and Owen 'Coves' Jones's answers, who both submitted a not completely on-topic or not complete answer.
Use background trasitions (CSS3) and jQuery simultaneously.
JSFiddle
jQuery
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$("header").addClass("scrolled");
} else {
$("header").removeClass("scrolled");
}
});
});
CSS
header {
background-color:blue;
-webkit-transition: background-color 700ms linear;
-moz-transition: background-color 700ms linear;
-o-transition: background-color 700ms linear;
-ms-transition: background-color 700ms linear;
transition: background-color 700ms linear;
}
header.scrolled {
background-color: red;
}
Update February 3rd, 2017
browser support is very good, and the less performing jQuery solution below should not be used. Browser support.
Cross-browser solution
If you want to make it more cross-browser compatible, you can try the color plugin. But from what I've tested, it has quite a bad performance.
JSFiddle
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$("header").animate({
backgroundColor: "red"
}, 200);
} else {
$("header").animate({
backgroundColor: "blue"
}, 200);
}
});
});
Don't forget the plugin itself:
//cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js
First, as was mentioned in the other answer, you will need to include jQuery UI or the jQuery Color plugin for color animation.
Second, and this is just winging it, but give this the old college try:
$(function(){
$(window).scroll(function(){
var $scrollPercent = ($(document).scrollTop() / 100);
if($scrollPercent <= 1){
$('header').css({backgroundColor:'rgba(0,0,0,'+$scrollPercent+')'});
}
});
});
This should give you a gradual fade in based on the amount down the page you scroll. This means that if you scroll 50 px down, your background color opacity would be set to 50% (50 px down / 100 px height wanted). You can also easily change the amount of height that you want to scroll down to reach full opacity very easily this way.
EDIT So it turns out you just want to fade in the color after 100px ... not my gradual fade in. No problem.
Others have pointed out the wonderful (and much better) CSS3 way to do it ... create a transition effect, and add a class on scroll. I won't steal their thunder, but I shall provide an alternative that works back to ancient browsers too.
Add an additional line of HTML inside of your header at the top:
<div class="header">
<div class="headerBackground"></div>
<!-- other header stuffs -->
</div>
Then set its CSS as such:
.header {
position:relative;
}
.headerBackground {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgb(0,0,0);
opacity:0;
filter:alpha(opacity=0); // for IE8 and below
}
Then use the following jQuery:
$(function(){
$(window).scroll(function(){
var $bg = $('.headerBackground');
if($(document).scrollTop() >= 100){
$bg.animate({opacity:1},500); // or whatever speed you want
} else {
$bg.animate({opacity:0},500);
}
});
});
This also has the added benefit of not requiring another library (jQuery UI / jQuery Color plugin). The downside is, of course, the non-semantic HTML. Like I said, just another alternative.
I prefer to create 2 css classes for this type of issues. One for when window is scrolled and one for when it's not:
header { background: transparent; }
header.scrolled { background: #f2f2f2; }
Then the javascript should be:
$(function () {
$(window).scroll(function () {
if($(document).scrollTop()>100){
$('header').addClass('scrolled');
}
else {
$('header').removeClass('scrolled');
}
});
})
your code is correct, but jQuery does not natively support color animation. you need a plugin or jquery-ui for that: http://jqueryui.com/animate/
EDIT: actually, your code is kinda wrong. you want to set the backgroundColor to something. background: 1 is invalid css:
so .css({'backgroundColor': 'red'}) and then .css({'backgroundColor': 'blue'})
If you don't need to support a lot of older browsers you can animate background colours with a combination of jQuery and css3 transitions:
Take the HTML:
<div id="myBox">Stuff here</div>
And the javascript:
var myBox = $('#myBox');
myBox.on('click', function (el) {
myBox.css('background-color', 'red');
}
Then click the element #myBox will change its background colour red. Instantly, with no fade.
If you also put in place the css code:
#myBox {
-webkit-transition: background-color 300ms ease-in-out;
-moz-transition: background-color 300ms ease-in-out;
transition: background-color 300ms ease-in-out;
}
Then any colour changes to the background will be faded over 300ms. Works on all latest version browsers, but not on IE 9 and below.
The solution that I ended up using is as follows:
I created a section that I'm fading in and out based on the scroll position.
CSS
.backTex {
width:100%;
height:500px;
margin-top:50px;
background-color: #myGreen;
//Height
transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
//Background-Color
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
jQuery
$(document).scroll(function() {
var positionScroll = $(this).scrollTop();
if(positionScroll <= 499) {
$(".backTex").css("background-color", "#fff");
} else if (positionScroll > 500 && positionScroll < 1100) {
$(".backTex").css("background-color", "#2ecc71");
} else {
$(".backTex").css("background-color", "#fff");
}
});
As far as compatibility, I haven't noticed any issues between browsers as of yet. Please reply to my post if you experience any. Thanks!

Remove background color attribute from css onmouseover using JQuery

I'm trying to remove background color of a div onmouseover.
$("#LoginTab").mouseover(function(){
//Gives me white color
$("#LoginTab").animate({backgroundColor: ''},1000);
});
$("#LoginTab").mouseout(function(){
$("#LoginTab").animate({'backgroundColor':'#babfde'},1000);
});
Here is the CSS
#LoginTab
{
background-color:#babfde;
padding-top:5px;
padding-bottom:5px;
opacity:1;
border:#babfde 2px solid;
}
So the effect I want is that background color will be removed which will give me only border and stuff inside that div onmouseover
You need to use transparent, empty string isn't a valid background color.
Also you could just do it with css using a hover flag:
#LoginTab:hover
{
background-color: transparent;
}
Check this fiddle
http://jsfiddle.net/vigneshvdm/xjhBT/
you just need to tweak css, no need of script to do this
#LoginTab:hover
{
background-color:transparent;
padding-top:5px;
padding-bottom:5px;
opacity:1;
border:#babfde 2px solid;
}
you could just do it with CSS using a hover flag:
#LoginTab:hover
{
background: none;
}
Using jQuery!
You can use hover jQuery function
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. [documentation]
$('#LoginTab').hover(
function(){
$(this).animate({'backgroundColor': 'transparent' }, 100);
},
function(){
$(this).animate({'backgroundColor': '#babfde'}, 100);
}
);
JSFIDDLE
Using CSS
You can do it simply with CSS transitions:
#LoginTab {
background-color: #AD310B; /* <--- your color here */
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
height: 100px;
}
#LoginTab:hover {
background-color: transparent;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
JSFIDDLE
Setting the color opacity
In both cases you can use rgba():
rgba(0, 0, 0, 0.5);
^ ^ ^ ^------ The opacity
Red -┘ | └----- Blue
└ Green
backgroundColor property can not be treated as other property in animate() function
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the *jQuery.Color() plugin is used*). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable. reference http://api.jquery.com/animate/
for jQuery.Color() you have to download jquery.color-2.1.2.min.js from https://github.com/jquery/jquery-color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="menu.css">-->
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery.color-2.1.2.min.js"></script>
</head>
<body>
<style>
#LoginTab
{
background-color: #babfde;
padding-top: 5px;
padding-bottom: 5px;
opacity: 1;
border: #babfde 2px solid;
}
</style>
<div id="LoginTab">
login tab</div>
<script type="text/javascript">
$("#LoginTab").mouseenter(function () {
$(this).animate({ backgroundColor: '#ffffff' }, 1000); //gives me white color
});
$("#LoginTab").mouseleave(function () {
$(this).animate({ backgroundColor: '#babfde' }, 1000);
});
</script>
</body>
Try this simple way in jQuery:
$(document).ready(function() {
$("#LoginTab").mouseouver(function() {
var p = $("#LoginTab").css("background-color", "none");
p.hide(1500).show(1500);
p.queue(function() {
p.css("background-color", "#color");
});
});
});
Check This Fiddle : https://jsfiddle.net/rakumoyal/n762fdg1/2/
As show in fiddle, You can do it by css ..No need to use jquery.
#LoginTab:hover
{
background-color:transparent;
}
It will work fine. Enjoy the code.

Opacity on a div hover

So far I've got this code
http://jsfiddle.net/Nq79H/1/
but I want to fadeout the image in order to leave only the text visible.
Do I need to change the javascript or write a new css div?
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
...but I want to fadeout the image in order to leave only the text visible.
Simply add .fadeToggle() to the img element as well:
$('img', this).fadeToggle();
JSFiddle example.
Here is the CSS3 transition solution:
jsFiddle
CSS
.thumb .text {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #999;
background: rgba(0, 0, 0, 0.3);
text-align: center;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
opacity:0;
}
.thumb:hover .text {
opacity:1;
}
.thumb img {
opacity:1;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
}
.thumb:hover img {
opacity:0;
}
Support
The support for CSS3 transitions is pretty decent now, the latest versions of all the major browsers (Safari, Chrome, Opera, Firefox) all support transitions. IE on the other hand only supports it from version 10. Transitions are nice though in that they don't crash and burn when something doesn't support it. The opacity of the element will still change, there will just be no transition.
References
Caniuse.com transitions
If you want to fadeIn text and fadeOut image, just add one more line:
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
$(this).children("img").fadeToggle();
});
$(this).find('img').fadeToggle();
Is this what you're looking for?
$('.thumb').hover(function(){
$(this)
.find('.text-js')
.fadeToggle()
.end()
.find('img')
.fadeToggle();
});
http://jsfiddle.net/Nq79H/4/
No JS or additional HTML needed.
http://jsfiddle.net/Nq79H/11
.thumb img {
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
.thumb:hover img {
opacity: 0;
}

How do I fade in a div that has a set opacity?

I have a div filled with info at this blog and I have it set at a certain opacity using CSS. How would I have it "fade in" using jQuery to 90 or 100% on hover of that div?
.infoHolder2 {
position:absolute;
color:#FFF;
background:#9f9377;
padding:15px;
padding-top:23px;
z-index:5;
width:97.7%;
bottom:8px;
margin:-8px;
opacity:0.2;filter:alpha(opacity=20)
}
<div class="infoHolder2"><div id="title">I'm {Title} and I like <span id="stuff"></span>.
</div><img id="portrait" src="{PortraitURL-128}"><img id="portraitCover"
src="http://static.tumblr.com/ux4v5bf/3Uolhxkyl/cover.png">
<div id="infoHolder">{Description}</div></div>
Try jquery fadeto().
This should do the trick (fade to 90% in 500 ms):
$(".infoHolder2").fadeTo(500, 0.9);
I think that the following should work:
$('.infoHolder2').fadeTo(500,'1');
It's worth noting the order of the arguments in the fade() method, duration is first, followed by the value of the desired opacity. For some reason I always get them mixed up when writing them down. Thanks #alex for the comment.
You could, also, if you wanted to, use:
$('.infoHolder2').animate({'opacity':'1'},500);
But, unless you're animating other properties, it becomes a little less concise for the same effect.
JS Fiddle demo to cover both options.
References:
fadeTo(),
animate().
Edited in response to OP's requirements to run this on hover()
$('ul li').hover(
function(){
var which = $(this).index();
if (which == 0){
$(this).fadeTo(500,'1');
}
else {
$(this).animate({'opacity':'1'},500);
}
},
function(){
$(this).fadeTo(500, 0.5);
}
);
JS Fiddle demo.
Use jQueries fadeTo
Usage
http://api.jquery.com/fadeTo/
fadeTo(duration, opacity)
Example
//90% Opacity
$('.infoHolder2').fadeTo("slow", 0.90);
//100% Opacity
$('.infoHolder2').fadeTo("slow", 1);
On Hover
$('.infoHolder2').hover(
function(){
$(this).fadeTo('slow', 0.90);
},function(){
$(this).fadeTo('slow', 0.50);
}
);
Live Demo
You can use fadeTo().
To fade to 90% opacity, use this...
$('.infoHolder2').hover(function() {
$(this).fadeTo(1000, 0.9);
}, function() {
$(this).fadeTo(1000, 0);
});
jsFiddle.
also by CSS3 without using jquery
.image {
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
.image:hover {
opacity:0;
filter:alpha(opacity=0);
}

Categories