i am currently implementing a system where I require to make a image layer on hover of a particular image. From jquery how is it possible to get and set visibility of a particular image only even if they have the same class.
This is my js code
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg').css('visibility','visible');
$('.hoverimg').css('opacity','0.6');
});
$('.imgclass').mouseout(function() {
$('.hoverimg').css('visibility','hidden');
});
});
To make it more clear this is an example I made. http://jsfiddle.net/xwj4A/
As you can see atm when one hovers on a particular image both images visibility is set to visible (as they have the same class). Thanks for your help!
If i understand you right , you need this :
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg' ,this).css('visibility','visible');
$('.hoverimg' ,this).css('opacity','0.6');
});
$('.imgclass').mouseout(function() {
$('.hoverimg' ,this).css('visibility','hidden');
});
});
JSFiddle: http://jsfiddle.net/xwj4A/8/
Replace:
$('.hoverimg')
with:
$(this).find('.hoverimg')
In order to only select the .hoverimg elements that exists within the hovered container.
You have to apply new styles to target element instead of all elements with same class.
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg', this).css({
visibility: 'visible',
opacity: 0.6
});
});
$('.imgclass').mouseout(function() {
$('.hoverimg', this).css('visibility','hidden');
});
});
$(this) refers to actual element which triggered event.
Related
I'm working on a pricing table with some hover.
You can see it right here: http://lhit.nl/lucid/
As you see, when you hover on a pricing table all the divs toggle the classes.
And thats not what I want. I want it to be seprate ofcourse.
My jQuery:
$('.package').hover(function(){
$('.name').toggleClass('name-hover')
$('.price-container').toggleClass('price-hover')
$('.price').toggleClass('white-hover')
$('.month').toggleClass('white-hover')
});
The css is just to overwrite current colors:
.package .price-hover {
background: #008ed6;
}
.package .white-hover {
color: #fff;
}
I already tried to use $(this) but it doesn't work.
$('.package').hover(function(){
$(this).find('.name').toggleClass('name-hover')
$(this).find('.price-container').toggleClass('price-hover')
$(this).find('.price').toggleClass('white-hover')
$(this).find('.month').toggleClass('white-hover')
});
This can be simply achieved just by css. Why to add Js for this ?
package:hover .price-container{
background: #008ed6;
}
You could use each():
$('package').each(function() {
var _this = this;
$(this).hover(function() {
$(_this).find('.name').toggleClass('name-hover')
$(_this).find('.price-container').toggleClass('price-hover')
$(_this).find('.price').toggleClass('white-hover')
$(_this).find('.month').toggleClass('white-hover')
});
})
First you need to use find to only change the classes for elements
inside the currently hovered over .package, otherwise it will
change classes for all these elements.
Secondly, hover event takes
2 functions, one when mouse enters the hover area, second when cursor
exits the hover area. The way you are handling hover event, it toggles the classes twice, once on hover in, once on hover out, so in the end leaving it same as before.
Try this code:
$('.package').hover(function(){
$(this).find('.name').addClass('name-hover');
$(this).find('.price-container').addClass('price-hover');
$(this).find('.price').addClass('white-hover');
$(this).find('.month').addClass('white-hover');
}, function(){
$(this).find('.name').removeClass('name-hover');
$(this).find('.price-container').removeClass('price-hover');
$(this).find('.price').removeClass('white-hover');
$(this).find('.month').removeClass('white-hover');
});
$(".package").hover(function() {
$this = $(this);
$this.find(".name").toggleClass("name-hover");
$this.find(".price-container").toggleClass("price-hover");
$this.find(".price,.month").toggleClass("white-hover");
});
#Spartak Lalaj As of jQuery 1.4 the .hover() may have one parameter. See https://api.jquery.com/hover/
When I check how this piece of code below affect my html live, I see that the span#error is faded out and faded in with display: block but changes right-after to display: inline.
How can I prevent this from happening?
jQuery
$(function() {
$("#credentials .wrapper button").click(function() {
$("span#error").fadeOut(300);
$("span#error").html('<b style="color: #ce1919;">(!)</b> TEST').fadeIn(300).css("display", "block");
});
});
JsFiddle
jQuery's fading methods automagically sets the display type that the element has by default.
If you're going to set it to something else, do it after the fading has completed, or use a method that doesn't set the display property, such as fadeTo or animate()
$(function() {
$("#credentials .wrapper button").click(function() {
$("#error").fadeOut(300, function() {
$(this).html('<b style="color: #ce1919;">(!)</b> TEST')
.fadeIn(300, function() {
$(this).css("display", "block");
});
});
});
});
The real answer would be to just use a block element
<div id='error'>Error</div>
FIDDLE
This occurs because the fadeIn-method sets the display variable after fading in. Use the complete callback of the fadeIn-method to set the display-property of the span to block.
When using fade in, the element will be displayed as his original state. Since you original state is none, jQuery will select the default display value of the element, which is in this case inline.
In you CSS, if you change the display value to block and hide the element in a DOM ready handle, everything work fine :
$(function() {
document.getElementById('error').style.display = 'none';
$("button").click(function() {
$("span#error").fadeOut(300);
$("span#error").html('<b style="color: #ce1919;">(!)</b> TEST').fadeIn(300).css("display", "block");
});
});
http://jsfiddle.net/yfC2B/2/
I'm aware that using block element would be better, I am just telling why it doesnt not currently work.
I wouldn't even use fadeIn I would just use .animate(), since the documentation for fadeIn says that it just animates the opacity property, to prevent jQuery from messing with the display property at all:
$(function() {
$("button").click(function() {
$("span#error").fadeOut(300).stop();
$("span#error").stop().html('<b style="color: #ce1919;">(!)</b> TEST').css({'opacity':'0','display':'block'}).animate({opacity:1},1000,function(){});
});
});
http://jsfiddle.net/yfC2B/3/
My goal is to change the background color of an element and one of its siblings that is higher in the DOM but in the same parent on hover. I was able to use css transition to change the first element but i couldn't get the sibling to change. so I looked into jquery UI addClass effect
I wanted the code below to work since I couldn't get a css solution to work, the goal was to change both elements on hover
$(document).ready(function(){
$('.circletag').hover(function() {
$(this).addClass( "red");
$(this).parent().find('title').addClass('red', 2000);
}, function() {
$(this).removeClass('red', 5000);
$(this).parent().find('title').removeClass('red', 2000);
});
})
I was able to get a fade effect on the $(this) elements but the .title element is not showing any changes at all.
when .circletag is hovered I would like .circletag backgroud to change and the .title background to change at the same time over a 2 second interval. If It cant be done with css which is the way I would prefer the solution I would appreciate a jquery one.
Also I'm curios to know why the console says
SyntaxError: syntax error
.ui-helper-hidden {
Why does the duration not work in this addClass function when im using jquery ui? So weird for me.
why is it that when the mouse is moves off the element it does not take 5 seconds to remove the class? it looks like the css transition rule is calling the shots.
basically I want the div with the class of .title's backgound and .circletag background to fade in and out on hover of .circletag.
jsfiddle
Thanks for your help guys.
Try it like this:
$(document).ready(function(event){
$('.circletag').hover(function() {
$(this).addClass( "red");
$(this).parent().find('.title').addClass('red', 2000);
}, function() {
$(this).removeClass('red', 5000);
$(this).parent().find('.title').removeClass('red', 2000);
});
})
You need to specify the class selector in 'find' function..
Let me know :)
Try this,
$(this).parent().find('.title').addClass('red', 2000);
you need to use ".title" inside your find() if you are referring a class.
Fiddle
Hope this helps.
I am attempting to use hover with with to swap div visibility when mousing over navigation buttons.
When there is no mouseover, there is a 'default' div that should appear.
My problem is that every time the mouse transitions between links, the default div briefly reappears.
Is it possible to make the swap seamless, or will a different approach to the swap work? I attempted to set the nav container div with a fadeout/fadein event for the default div, but I didn't have any luck with that.
Refer to the following fiddle for an example: http://jsfiddle.net/ElectricCharlie/Wk8Yd/
$('div.hmnav').hover(function()
{
$('#_wnr00').stop(true,true).fadeOut();
$('#_'+this.id).stop(true,true).fadeIn(400);
},
function ()
{
$('#_'+this.id).stop(true,true).fadeOut(400);
$('#_wnr00').stop(true,true).fadeIn();
});
I just got rid of true,true and it worked fine:
$('div.hmnav').hover(function () {
$('#_wnr00').stop().fadeOut();
$('#_' + this.id).stop().fadeIn(400);
},
function () {
$('#_' + this.id).stop().fadeOut(400);
$('#_wnr00').stop().fadeIn();
});
Updated your jsFiddle as well.
EDIT: took the time to clean up your jQuery as well:
$('#navbox_inner')
.corner("round 12px")
.parent()
.css({padding:1})
.corner("round 14px")
$('#navbox_inner').on({
mouseenter: function () {
$('#_wnr00').stop().fadeOut();
$('#_' + this.id).stop().fadeIn(400);
},
mouseleave: function(){
$('#_' + this.id).stop().fadeOut(400);
$('#_wnr00').stop().fadeIn();
}
},'.hmnav');
This is much faster, as it binds to one item, and delegates appropriately. I also removed the element selector, as a pure class based / id based selector is faster. Updated your jsFiddle a second time.
I don't know what am I doing wrong but nothing is correct.
Basically it works just fine but if I hover over another list item it starts animation and previous one remain.
Here's JS part...
$('nav#topMenu li').on('mouseenter mouseleave', function(e) {
if(e.type === 'mouseenter') {
$(this).append('<span class="active"></span>');
$('span.active').stop().slideDown('200');
} else {
$('span.active').stop().slideUp('200', function() {
$(this).remove();
});
}
});
Here's JS fiddle:
JS Fiddle redirect
Sorry for that ugly hover background color...
I have no ideas although what I am doing wrong... Appears to be everything wrong!
Any solution is appreciated. Thank you.
EDIT:
Appears that I am also appending that span on every single hover, even if it's already appended to the list item. Oh my ...
This is happening because both spans still have the class active. The mouseleave occurs first, but mouseenter triggers .stop().slideDown() on both spans.
There are several possible solutions, but I think one is to just use .removeClass('active') on the span (possibly adding another class with the same styles). This will cause it to slide all the way up while the true active span slides down:
http://jsfiddle.net/ExplosionPIlls/HL7Aj/1/
Check if the animation is completed with .is(":animated"). Since $('span.active') selects all the elements with the active class, you effectively stop the animation on all of them as you move your cursor across elements. You should apply further animation on those elements on the condition that they are not carrying out any existing animations.
See DEMO.
$(function () {
$('nav#topMenu li').on('mouseenter mouseleave', function(e) {
if(e.type === 'mouseenter') {
$(this).append('<span class="active"></span>');
$('span.active').each(function() {
if (!$(this).is(":animated")) {
$(this).stop().slideDown('200');
}
});
} else {
$('span.active').stop().slideUp('200', function() {
$(this).remove();
});
}
});
});
I suppose that replacing
$('span.active').stop()
with
$(this).find('span.active').stop()
may help you.