I am applying an hover effect on an image with JQuery.
State on page load :
State on hover :
State on mouseout :
Here is the code snippet :
$(document).ready(function(){
$(".image-container").hover(function() {
$(this).parents().children().children('.image-01').css({'background-color':'#D4E619', 'opacity': '0.5'}),
(function() {
$(this).parents().children().children('.image-01').css({'background-color':'#FFFFF','height':'0', 'opacity': '0', 'visibility' :'hidden'});
});
});
});
I tried several css instructions but the image keeps the hover state.
Edit :
The final goal is to have a different hover color on several images inside a grid. All elements of the grid have the same classname.
I use a first JQuery function to append the classnames and then, generates a specific hover state on some images.
It's because you mixed in and out functions into single one. So your second function that (I assume) should be called on mouse out is never called.
You should unwrap that function from first one and put as second argument for .hover
$(document).ready(function() {
$(".image-container").hover(
function() {
$(this).parents().children().children('.image-01').css({
'background-color': '#D4E619',
'opacity': '0.5'
})
},
function() {
$(this).parents().children().children('.image-01').css({
'background-color': '#FFFFF',
'height': '0',
'opacity': '0',
'visibility': 'hidden'
});
}
);
});
Some suggestions (quite abstract since no HTML is provided):
You can reduce complexity of selector by finding closest unique wrapper and then find desired element: $(this).closes('.image-wrapper').find('.image-01')
Via JS apply only display/opacity. Via CSS set rules for element when it's shown, no point in setting it's background if it's not visible: $(this).[..].show(), $(this).[..].hide()
I assume you can just do it with css: .image-wrapper:hover .image-01{display: block;}
Suggestions:
Use id for the image, so you can reduce dom complexity.
Use two separate events (.hover and .mouseout)
Use arrow functions rather than 'function' keyword
Example:
$(document).ready(()=>{
$("#image-01").hover(()=>{
/* css code for hover here */
}
$("#image-01").mouseout(()=>{
/* css code for mouseout here */
}
}
Edit:
Maybe you can warp all of your images in a div element.
Then you can use
let images = $(' /* container id */ ').children()
To get its children.
Then just loop through the images and add hover events
Related
I'm using blast.js and my hover effect triggers when you move the mouse over the element and when you move it out of the element. I want it to behave like a normal hover effect. I know that the hover effect usually is set up like:
$('h1').hover(function(){
//code here
}, function(){
//code here
});
but I'm not sure what I would put in the second function when using blast.js, to prevent it from happening twice.
I have a fiddle, but I don't know how to make blast work on the fiddle.
DEMO
$(function() {
$('h1').hover(function() {
// Blasts the title
var chars = $('h1').blast({
delimiter: 'word'
});
// Animation character per character
chars.each(function(i) {
// Initialization of the position
$(this).css({
position: 'relative',
left: 0
}).delay(i * 45).animate({
left: '50px'
}, 300).delay(200).animate({
left: 0
}, 300);
});
});
});
You can use .mouseover() for when the cursor enters the object and .mouseout() for when the cursor leaves the object.
These are JQuery functions based on HTML events. There are also other events like mouseenter and mouseleave, you can find them in W3Schools.
You should add param to your function:
$('h1').hover(function(e) { ... });
and call inside of the body:
e.preventDefault();
I am trying to edit this code for my website. Right now, on hover it activates an overlay on the image. I want to add to it so that in addition to activating the overlay it also changes the background color of the body. Can this be done within this code or is this more work than I think? Thanks!
jQuery('.images').hoverIntent(function() {
jQuery(this).find('.title-wrap').stop().each(function() {
jQuery(this).animate({
width: jQuery(this).data('wrapping')
}, 150);
});
One way to configure hoverIntent is with 2 functions as arguments .... one for each of mouseenter and mouseleave.
For the body just toggle a class and set the background in a css rule
function hoverIn(){
$('body').addClass('different-background-class');
jQuery(this).find('.title-wrap').stop().each(function() {
jQuery(this).animate({
width: jQuery(this).data('wrapping')
}, 150);
}
function hoverOut(){
$('body').removeClass('different-background-class');
jQuery(this).find('.title-wrap').stop().width('auto');
}
// pass the 2 function references as arguments
jQuery('.images').hoverIntent(hoverIn,hoverOut);
I'm not sure if you have width defined prior to this animation. If so we can store the initial value within hoverIn() function in order to reset it in hoverOut(). I used auto assuming it wasn't set in normal state
I have two tables next to each other, the one on the right has an issue with the div displaying off the page when using show().
How can I prevent this?
$("tr.invoice_head td:last-child a").hover(
function(){$(".custNotes-span",this).position({
of: '.custNotes-span',
my: 'right top',
at: 'right top',
offset: '.custNotes-span'
}).css({
'z-index':'100',
'width': '200px',
'position':'absolute'}).show();},
function(){$(".custNotes-span").hide();}
);
Update: JSFiddle link - http://jsfiddle.net/r60ywb0L/2/
My apologies, here is a copy of the JSFiddle including the JS used and CSS. There's two tables floated next to each other and I'm trying to get a div.custNotes-span to display over the rest of the page when hovering over the anchored link inside the last td of the tr.invoice_head.
Playing around in the fiddle, I found that :
CSS needs to be applied before being positioned.
The elements need to be rendered in the DOM when positioned (but not necessarily 'visible').
The of property of the position() map is better set to the closest table row
collision:'fit' seems to work better than the default collision:'flip', though you may not notice the difference except in th fiddle.
The elements can be positioned once. It's not necessary to re-position them at each showing.
The following workaround exploits CSS visibility to allow correct positioning while avoiding FOUC.
apply .css() including visibility:hidden
"show" with .show() (but still hidden)
apply .position()
hide with .hide()
make "visible" with visibility:visible (but still hidden)
The elements can then be shown/hidden with .show() and .hide() in the hover handlers.
// As the positioning map and the css map get used in a loop, it's worth assigning them outside the loop.
var maps = {
css: {
'z-index': '100',
'width': '200px',
'position': 'absolute',
'visibility': 'hidden'
},
pos: {
'of': null, //added dynamically below
'my': 'right top',
'at': 'right top',
'collision': 'fit'
}
};
//Apply CSS and pre-position the notes
$(".custNotes-span").each(function() {
$(this)
.css(maps.css)
.show()
.position( $.extend({}, maps.pos, {'of': $(this).closest("tr")}) )
.hide()
.css('visibility','visible');
});
//The maps have done their work and can be deleted from the closure.
delete maps.css;
delete maps.pos;
//Hover actions
$(".custNotes a").hover(function() {
$(".custNotes-span", this).show();
}, function() {
$(".custNotes-span", this).hide();
});
Selectors are modified to be a bit more friendly.
DEMO
I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.
This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)
EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div
You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/
I am using the following code to expand and center on div on :hover
$(document).ready(function(){
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
//$(this).removeClass('highlight');
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "148px", "height":"90px", "top: ":"0px", "left":"0px", "margin-top: ":"0", "margin-left":"0"}, 500, function(){
$(this).removeClass('highlight');
});
});
});
My problem is two things:
1) I'm not sure how to reset the "top" and "left" css coordinates to their original value on mouseOut. To see a working demo, go here:
http://jsfiddle.net/kTFvj/1/
2) The z-index (see here: http://jsfiddle.net/kTFvj/1/) is not affecting the :hovered grid elements. Not sure why.
You can use jQuerys .data method to store the original values and retrieve them on mouseout
I have made a modification to your original code that might work like you wish.. it uses .data and also updates the z-index so the active element is always on top
http://jsfiddle.net/kTFvj/2/
as Martin said, store the values when the animation begins using a variable, and restore when done.
about z-Index: just have a variable called maxZIndex=0
and everytime an animation begins, set the object's zIndex property to maxZIndex++
What about using % instead of pixels?
Another solution is saving the actual value of width and height in some vars and restoring on mouse out.