Have a look at the following JQuery code:
function my_hover()
{
$( "#up,#down" ).hover(
function() {
$("#up").animate({
"background-color": "#020306"
});
$("#down").animate({
"background-color": "#171716"
});
},
function() {
$("#up").css("background-color","#C8CACF" );
$("#down").css("background-color","#FAFAF8" );
}
);
}
There are two divs: #up,#down which I cannot wrap into a parent div(due to design restrictions). What I want to do is to animate the change in background color whenever #up or #down are being hovered. However, in case the mouse leaves one div by going directly to the other(the two divs are stuck together vertically) I do not want the last two lines of the above code being applied. I want them to be applied only when mouse hovers out from both divs. How may I achieve that? At users.sch.gr/ellhn you may see what is happening with the above code in the first left rectangle with the target photo (transition between up and down provokes change of color and that's not desirable).
Thank you
Try this.
HTML
<div id="up">Up</div>
<div id="down">down</div>
CSS
div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}
Script
$('#up, #down').mouseenter(function(){
//alert('hi')
$("#up").addClass('up-hover');
$("#down").addClass('down-hover');
})
.mouseleave(function(){
//alert('hi')
$("#up").removeClass('up-hover');
$("#down").removeClass('down-hover');
});
Fiddle Demo
Using the technique #nnnnn alluded to, e.g., using a timeout:
(function init() {
var $up = $('#up'),
$down = $('#down'),
hovered = false;
$up.hover(over, out);
$down.hover(over, out);
function over() {
hovered = true;
$up.css({
"background-color": "#020306"
});
$down.css({
"background-color": "#171716"
});
}
function out() {
setTimeout(function to() {
if (!hovered) {
$up.css("background-color", "#C8CACF");
$down.css("background-color", "#FAFAF8");
}
}, 1000);
hovered = false;
}
})();
http://jsfiddle.net/TudqT/3/
And with the elements inline next to each other, instead of vertically aligned:
http://jsfiddle.net/TudqT/5/
Related
I made div, if i click on it, jquery makes bullet and that element is animated. This is code:
$('.square').click(function() {
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
});
It works properly when I'm not clicking second time on div before animation is done. If i do this, my second "bullet" starts animation from position of first.
How to fix that? Thank's for help :)
UPDATE##
Here's the jsfiddle with problem:
https://jsfiddle.net/2ghj1x45/
it's because the elements all have a size because they aren't positioned absolutely so each bullet div you add has display block, so will get it's own line where it's height is bullet size + margin top , which increases as it's animated. try instead using position absolute so the bullet div doesn't affect the layout of any other div
like so
$(bullet).animate({ top: value });
Why not timeout the click function with a variable:
var animating = false;
$('.square').click(function() {
if(!animating) {
animating = true;
setTimeout(function() {
animating = false;
}, 2000);
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
}
});
EDIT:
Updated JSfiddle
I have a navigation menu that upon hovering (using the hoverIntent plugin and tweenmax to animate) replaces a div with the relevant background image. I have this all working fine, but what i'm stumped with is how to prevent the action being repeated on the element that is currently selected. So for example if you hover over the first and then hover off it I don't want the action to be repeated once you hover over that one again because it is already selected. Attached is the link my fiddle http://jsfiddle.net/olichalmers/5csofnhz/1/
var homeNav = function () {
var tgt = $(this);
$("#homeImageNav a ").hoverIntent({
over: homeNavOver,
out: homeNavOff,
interval: 0
});
function homeNavOver() {
var tgt = $(this);
var bgHold = $("#bgHolder");
var bg = tgt.attr('data-bg');
if (!tgt.hasClass('current')) {
TweenMax.set($("#bgHolder"), {
opacity: 0,
background: bg,
scale: 1.1
});
TweenMax.to(bgHold, 1.5, {
opacity: 1,
scale: 1,
});
}
//tgt.addClass('current');
}
function homeNavOff() {
//if (tgt.hasClass('current')) {
//tgt.removeClass('current');
//}
}
};
And here is the homeNav function.
You just need to make changes in your function - homeNavOff like this:
function homeNavOff() {
$('#homeImageNav a').removeClass('current');
$(this).addClass('current');
}
See it in action on this fiddle
Updated your Fiddle
What I have added is:
One variable to store current selected link
Check it with the hovered link
If it is not the same then perform Background change
Else do nothing.
Update everytime any link(One or Two) is hovered
Look on this :
http://jsfiddle.net/5csofnhz/6/
If any query feel free to ask
I want to get an highlighting effect on some various div container while the rest of the site should be dampened down in opacity including the background-image.
Any idea?
Why does this code not work? tried .hover() instead of .mouseover() too but the function won't react on any input...
$(function () {
$('body').mouseover(function () {
$('body').prop({
"background-color": "red";
});
});
});
Another try would be to set a frame around the body tag in the html and then set props to that frame while the hovered frame is in normal state but I have no idea how to do this. Just beginning with js dev. :)
EDIT: did a fail...
$(function () {
$('body').mouseover(function () {
$('body').css({
"opacity": "0.3";
});
});
});
should be that way...
any way to apply the opacity to the background image too?!
fiddle Demo
Use .css()
Set one or more CSS properties for the set of matched elements.
$(function () {
$('body').mouseover(function () {
$(this).css({
"background-color": "red"
});
//or $(this).css("background-color","red");
});
});
this
.prop()
Set one or more properties for the set of matched elements.
.prop() will set the property for a particular element. In your case you have to use .css() to set the style. Please read .prop() and .css() to see the difference.
Try this,
$(function(){
$('body').mouseover(function(){
$(this).css({"background-color":"red"});
});
});
DEMO
Here's a FIDDLE
body {
background: gray;
min-height: 1000px; /* For demo purposes */
}
css
$(function() {
$('body').on('mouseover', function() {
$(this).css({ backgroundColor: 'red' });
});
});
animate
$(function() {
$('body').on('mouseover', function() {
$(this).animate({ backgroundColor: 'red' }, 600);
});
});
*Note: For some reason it doesn't work with jQuery 1.x(edge).
I think this is what you might want: a "dim" DIV element that adds a semi transparent black box on the entire page, that puts itself "below" the DIV you want to highlight, and then some javascript to turn it off and on, and rearrange the z indexes. The HTML would look something like this:
this is some text
<div id="div1" class="dimmable">hello</div>
<div id="div2" class="dimmable">goodbye</div>
<div id="dim"></div>
And then the JS:
$('div.dimmable').hover(function() {
$(this).css('z-index', 101);
$('#dim')
.css('z-index', 100)
.width($(window).innerWidth())
.height($(window).innerHeight())
.fadeIn();
}, function() {
var dimmable = $(this);
$('#dim').fadeOut({complete: function() {
dimmable.css('z-index', 99);
}});
});
You can see it working here.
A slight catch: the DIVs need to have position:relative, otherwise you can't change their z-indexes and you can't put them on top of the "dim" DIV. Also, anything with a higher z-index will not stay behind the "dim", of course, but you can just use higher numbers as a workaround.
I have this issue: I want to set background color on hover element and slidetoggle a div inside it. But when item slide out i would like to set another background color to the element. Check the code:
<div class="menu segundoitem institucional"><span class="textoMenu">Institucional</span>
<div id="submenu-01">Institucional</div>
</div>
And the Jquery
$(".institucional").hover(function(){
$('#submenu-01').stop().slideToggle();
$(this).css("background", "#380606");
});
As you can see, ".institucional" background is set to #380606, but when mouse leave and #submenu-01 disapear, ".institucional" keeps with the background #380606... I would like to make it background #FFFFFF
Use two seperate functions for mouseenter and mouseleave, and you can set whatever you want
$(".institucional").on({
mouseenter : function() {
$('#submenu-01').stop().slideDown(400);
$(this).css("background", "#380606");
},
mouseleave : function() {
var self = this;
$('#submenu-01').stop().slideUp(400, function() {
$(self).css("background", "#FFF");
});
}
});
I have a CSS menu that sets the parent li's color when hovering over it and it's child ul (submenu). Basically, when you hover over the menu, it changes colour and remains that way until you mouseoff the menu and it's submenu. It looks nice.
I've added some jQuery code to change the colour of the menu items when until a certain page is opened. Then, those menus will fade back in and regain colour. At which point, waiting for a hover to change colour.
The problem I'm having is, when you change the colour back to it's original state (set in CSS) with jQuery, it removes the :hover class preventing the colour change when hovering over it and it's child submenu. Any ideas on how to fix this? Is there a selector with jQuery that'll allow me to set the :hover class back to normal?
/* ---- Menu Colours ---- */
$(document).ready(function()
{
var colours = ['d50091', 'c8fa00', '00b4ff', 'b158fc', 'ffa800', '00b72f'];
var counter = 0; // Loop for the colurs
var status = 0; // Status of the colours (greyed out or visible)
$('ul.menu-horiz').children('li').children('a').hover(function()
{
$(this).parent()[0].css('color', '#d50091');
}, function()
{
$(this).parent()[0].css('color', '#b6b6b6');
});
$('ul.menu-horiz').children('li').children('a').each(function()
{
$(this).css({opacity: 0.2, color: '#' + colours[counter]});
counter++;
});
$('.haccordion .header').click(function()
{
if (window.location.hash.substr(1) == 'photogallery')
{
$('ul.menu-horiz').children('li').children('a').each(function()
{
if ($(this).css('opacity') != '1.1')
{
$(this).animate({opacity: 1.1}, 1000).css('color', '#b6b6b6');
}
});
}
else
{
counter = 0;
if ($('ul.menu-horiz').children('li').children('a').css('opacity') != '0.2')
{
$('ul.menu-horiz').children('li').children('a').animate({opacity: 0.2}, 1000, function()
{
$('ul.menu-horiz').children('li').children('a').each(function()
{
$(this).css('color', '#' + colours[counter]);
counter++;
});
});
}
}
});
});
You should be able to use the :hover selector and pass in an over() and out() function that set and unset the hover color respectively. See the :hover documentation for more.
Simple Example
given the CSS:
<style>
.blue { background-color: blue; }
.red { background-color: red; }
</style>
do something like this:
$('li').hover(function() {
$(this).removeClass('red');
$(this).addClass('blue');
},
function() {
$(this).removeClass('blue');
$(this).addClass('red');
})
I was having issues applying the colour change to the when hovering over it's parent (as you can see in the code posted above).
Took me until now to realise it needed to be changed to
$('ul.menu-horiz').children('li').hover(function()
{
$(this).children('a').css('color', '#d50091');
}, function()
{
$(this).children('a').css('color', '#b6b6b6');
});
Ignore me >_>