Fade in content on mouse over and hide on mouse out - javascript

I want #first to visibility:hidden normally and when mouse over it fades in and on mouse out it fades out.
EDIT
Fiddle : https://jsfiddle.net/vsdLk90s/1/
$("#one").on({
mouseover: function () {
timer = setTimeout(function () {
$("#first").css('opacity', '1');
}, 400);
},
mouseout: function () {
clearTimeout(timer);
$("#first").css('opacity', '0', 'visibility', 'hidden');
}
});

When multiple properties are to be defined, you are supposed to set them using a map.
.css({
'opacity': '0',
'visibility': 'hidden'
});
A better approach would be is to have a class with visibility:hidden set to #first, and toggle class based on the conditions.. Something in these lines.
$("#one").on({
mouseover: function () {
timer = setTimeout(function () {
$("#first").removeClass('hidden').css('opacity', '1');
}, 400);
},
mouseout: function () {
clearTimeout(timer);
$("#first").css({
'opacity': '0'
}).addClass('hidden');
}
});
Check Fiddle

May or may not be your issue, but I believe you need to replace the following lines:
$("#first").css('opacity', '1');
and
$("#first").css('opacity', '0', 'visibility', 'hidden');
need to become:
$("#first").css({'opacity': '1'});
and
$("#first").css({'opacity': '0', 'visibility': 'hidden'});
You will likely also need to 'toggle back on' visibility upon hover over like so:
$("#first").css({'visibility': 'visible', 'opacity', '1'});
Reference for using '.css' in JQuery: https://api.jquery.com/css/
TL;DR: Rather than separating the property and the desired value with a comma, you need to use a colon (:) and you need to enclose the .css part in {}
EDIT:
If you want the div to not be displayed upon page load, then only be displayed upon hover over add the following code to your stylesheet:
#first {
visibility:hidden;
}

Related

my jquery functions only works just one time

My code below works only once. I couldn't figure out why, please help.
i really really bad need it plz help me
my problem : first of all plz click on the frist button from the top
and then click on the second one now do this all again without
refreshing page now u see it dosent work like the first time
$(document).ready(function() {
$('#goLeft').on('click', function() {
if ($(".myWorks").css("opacity") == "0") {
$('.wrap').animate({
marginRight: '1045px'
}, "slow");
$('.about_me').toggleClass("Visibility_to_visible");
} else {
$('.myWorks').toggleClass("Visibility_to_Unvisible1");
$('.wrap').animate({
marginRight: '1045px'
}, "slow");
$('.about_me').toggleClass("Visibility_to_visible");
}
});
$('#goRight').on('click', function() {
if ($(".about_me").css("opacity") == "0") {
$('.wrap').animate({
marginRight: '20px'
}, "slow");
$('.myWorks').toggleClass("Visibility_to_visible1");
} else {
$('.about_me').toggleClass("Visibility_to_Unvisible");
$('.wrap').animate({
marginRight: '20px'
}, "slow");
$('.myWorks').toggleClass("Visibility_to_visible1");
}
});
});
and this is my web page : https://jsfiddle.net/nn8b8w3e/
I can't reproduce what you're describing:
first of all plz click on the frist button from the top and then click
on the second one
After clicking the first button, the second button is no longer visible to click. Neither of the buttons on the new panel do anything.
However looking at your code, you're testing for which direction to slide, what to do, etc, based on opactiy of each panel:
if ($(".myWorks").css("opacity") == "0") {
But the code you've included never changes opacity on anything. You assign various classes, eg:
$('.about_me').toggleClass("Visibility_to_visible");
But the CSS you include does not show those classes. You either need to define those classes with an opacity, or instead specify opacity in the action, eg:
$('.about_me').toggleClass("Visibility_to_visible").css('opacity', 1);
Hellp friends i did it thanks for all of U this changes can fix this bug here's for U
just Put some .css("opacity",1) , .css("opacity",0) on it
$(document).ready(function(){
$('#goLeft').on('click', function(){
if($(".myWorks").css("opacity") == "0")
{
$('.wrap').animate({
marginRight : '1045px'
},"slow");
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',1);
}
else {
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',0);
$('.wrap').animate({
marginRight : '1045px'
},"slow");
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',1);
}
});
////////////////////////////////////////////////////////////////////
$('#goRight').on('click', function(){
if($(".about_me").css("opacity") == "0")
{
$('.wrap').animate({
marginRight : '20px'
},"slow");
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',1);
}
else {
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',0);
$('.wrap').animate({
marginRight : '20px'
},"slow");
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',1);
}
});
/////////////////////////////////////////////////////////////////
});

Submenu animation "pops up"

I have a menu with sub items inside it. In order to make animation effect I want, I need to retrieve sub-menu width,height and height of its first-child. Now my animation works ,but sometimes my sub-menu just "pops up" (it doesn't animate its width ).
Here is The Fiddle of the problem.
http://www.vasinternetposao.com/wordpressdevelopment/wp-content/themes/override/images/submenu_problem.png
I am using this code:
var j = jQuery.noConflict();
j(document).ready(function () {
j('ul.nav').removeClass('nav').addClass('jnav'); //Add jquery Class to our menu
j('ul.jnav li').hover(function () {
if (j(this).children('ul:first').hasClass('jsub-menu')) { //Let's check if "jsub-menu" Class is here
return false; //If it is ("jsub-menu" here) don't SlideDown...
} else { //Else slide down if no class
j(this).find('ul.sub-menu:first').not(':animated').slideDown(500);
}
}, function () {
j(this).find('ul:first').slideUp(500, function () {
j(this).removeClass('jsub-menu').addClass('sub-menu');
j(this).css({
'height': '',
'width': ''
});
});
});
j('ul.jnav ul.sub-menu a').hover(function () {
j(this).addClass('active');
if (j('.active').next('ul.sub-menu').length) { //If submenu exist...
j('.active').next('ul.sub-menu').css({
'visibility': 'hidden',
'opacity': '0',
'display': 'block'
}); //Show it so we can read its:
var get_width = j('.active').next('ul.sub-menu').outerWidth(true); //WIDTH
var get_height_of_first_child = j('.active').next('ul.sub-menu').children('li:first').outerHeight(true); //HEIGHT of its First Child
var get_submenu_height = j('.active').next('ul.sub-menu').outerHeight(true); //HEIGHT of our menu
j('.active').next('ul').removeClass('sub-menu') //Remove class from menu, add another class apply HEIGHT of FIRST CHILD and hide it again...
.addClass('jsub-menu').css({
'visibility': '',
'opacity': '',
'height': get_height_of_first_child + 'px',
'width': '0'
});
j('.active').next('.jsub-menu').animate({
width: get_width
}, 1000, function () { //Animate WIDTH
j('.active').next('.jsub-menu').animate({
height: get_submenu_height
}, 1000); //callback animate HEIGHT
});
} //End if
}, function () {
j('.active').removeClass('active');
});
});
I think that this is happening because my Slide Up/Down animations are conflicting with my animate with/height functions but I am not sure. I have tried to solve it by adding stop(),stop(true,true),stop(true,false) in numerous combinations but failed. I am trying to solve this for days now so you stackers are my only hope. Please help!
Thank you!!
I was finally able to replicate the error.
I wrote this code for you, to replace the code you have for the animation.
var animating = false;
function animate($elm, options, callback) {
if (animating)
return;
animating = true;
$elm.animate(options, 1000, function() {
animating = false;
if (callback != undefined)
callback();
});
}
Call it like this, from inside your hover callback.
animate(j('.active').next('.jsub-menu'),
{
'width': get_width,
'height' : get_submenu_height
});
Basically, it checks if another animation is already running, in which case it doesn't start it. The Flag is set to false when the animation stopped, and let's other animations go on.
You can also pass a callback to do something after the animation is completed, but in your case you don't need it, because you can animate the height and width in the same time.
I tested it for like a minute and it looked pretty smooth.
Here is the updated feedle: http://jsfiddle.net/gabrielcatalin/TNxJ4/1/
P.S. You may also want to use the $ sign instead of 'j' for jQuery wrappers.

jquery fadein div on hover within wordpress loop

I've been playing around with a few different ways of doing this and i'm not 100% sure any of them will work once put into the loop.
I've tried a few different types of jquery hover effects but is there a way to only select the .displayDiv that is a child of the li i'm hovering?
I put where i'm at here: http://jsfiddle.net/XkaLh/
$('li').hover(
function()
{
$('.hoverDisplay').animate({ 'opacity': 1 });
},
function()
{
$('.hoverDisplay').animate({ 'opacity': 0 });
});
Thanks in advance for help
You need to limit the lookup hoverDisplay element within the hovered li element
$('li').hover(function () {
$(this).find('.hoverDisplay').animate({
'opacity': 1
});
}, function () {
$(this).find('.hoverDisplay').animate({
'opacity': 0
});
});
Demo: Fiddle

Remove styles set on specific event

I'm looking for a way to automatically remove styles set on specific event. Maybe I have ust overlooked it, but I have not seen such a feature in jQuery or vanilla js.
The idea:
$(element).hover(function() {
$(this).css({
backgroundColor : 'red',
color : 'white'
});
}, function() {
// remove styles set on handlerIn()
}).mousedown(function() {
$(this).css({
paddingTop : '+=1px',
paddingBottom : '-=1px'
});
}).mouseup(function() {
// remove styles set on mousedown
});
If I'm using $(this).removeAttr('style'); it will remove not only the styles set by specific event, but everything - where with mousedown / mouseup, that would remove the styles set by hover.
And yes, I know I can hardcode the values back to the defaults - doesn't fit!
What would be the best way to achieve such functionality?
You can do one thing for this. Declare classes for hover and unhover, something like:
.hover {padding: 5px;}
.unhover {padding: 0px;}
Then you can use .addClass('hover').removeClass('unhover') and the ilk. BTW, this is valid only if you have absolute properties.
You can declare multiple class on your css and add or remove them
$(element).hover(function() {
$(this).addClass("classHandlerIn");
}, function() {
$(this).removeClass("classHandlerIn").addClass("classHandlerOut")
}).mousedown(function() {
$(this).addClass("classMouseDown");
}).mouseup(function() {
$(this).removeClass("classMouseDown");
});
Hope this help.
EDITED
If you are feasible using arrays then see this solution.
var cssArray = [
{'background-color':'red','color':'white'},
{'background-color':'','color':''},
{'paddingTop':'+=10px','paddingBottom':'+=10px'},
{'paddingTop':'','paddingBottom':''}
]
$('div').hover(function() {
$(this).css(
cssArray[0]
);
}, function() {
$(this).css(
cssArray[1]
);
}).mousedown(function() {
$(this).css(
cssArray[2]
);
}).mouseup(function() {
$(this).css(
cssArray[3]
);
});​
SEE DEMO
First of all there is no $(element) selector.
You can create classes and gave them css properties and use with jQuery addClass() and removeClass() methods for removning specific event.
Note that bind() method is much more solid instead of hover(). Here is working jsFiddle:
$('#element').bind({
mouseenter :function() {
$(this).css({
'background-color': 'red',
'color': 'white'
});
},
mouseleave: function() {
$(this).css({
'background-color': 'white',
'color': 'black'
});
},
mousedown: function() {
$(this).css({
paddingTop : '+=10px'
});
},
mouseup: function() {
$(this).css({
paddingTop : '-=10px'
});
}
});​
And don't forgot to use CSS Pseudo-classes like :hover and :active selectors. Here link for all of them.

How to use .hover and .click on same element

The idea is to move a div downwards slightly when hovered and when clicked to move further down to reveal content. The problem is that when you have clicked the div and it moves down you are no longer hovering on it so it performs the 'close when not hovered function.
$(function () {
$('.more').hover(function () { //Open on hover
$('#pull_down_content').animate({
'top': '-360px'
}, 1000);
}, function () { //Close when not hovered
$('#pull_down_content').animate({
'top': '-380px'
}, 1000);
});
});
$('.more').click(function () { //Move down when clicked
$('#pull_down_content').animate({
'top': '0px'
}, 1000);
});
Put a class on the element to signify that it has been clicked, and do not close it if it has that class:
$(function() {
$('.more').hover(function(){ //Open on hover
$('#pull_down_content').animate({'top':'-360px'},1000);
},
function(){ //Close when not hovered
if (!$('#pull_down_content').hasClass("expanded"))
$('#pull_down_content').animate({'top':'-380px'},1000);
});
});
$('.more').click(function(){ //Move down when clicked
$('#pull_down_content').addClass("expanded").animate({'top':'0px'},1000);
});
Of course you now need another trigger to determine when exactly to undo the hover animation after the item has been clicked; how to do that exactly depends on the effect you want to achieve.
The problem is that when you have clicked the div and it moves down
you are no longer hovering on it so it performs the 'close when not
hovered function.
I'm not sure I get it? You do know that the element with the bound events is not the same as the one that you are animating ?
Anyway, something like this maybe:
$(function() {
$('.more').on('mouseenter mouseleave click', function(e) {
if (!$(this).data('clicked')) {
var Top = e.type==='mouseenter' ? '-360px' : e.type==='click' ? '0px' : '-380px';
$('#pull_down_content').stop().animate({'top': Top}, 1000);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$('#pull_down_content').stop().animate({'top': '-380px'}, 1000);
}
}
});
});
FIDDLE

Categories

Resources