Develop Reference

Prevent child element hovering from breaking parent hover

So let's say I have a parent div element that has an img child and that I want to execute some code when the parent element is hovered.
<div class="parent">
<img src="link_to_some_image" />
</div>
The issue here is that when the child img is hovered, the parent "hover state" breaks. How can I make it so that the parent keeps its hovered state even if its child elements are hovered?
Here is an example jsfiddle, try hovering on the empty space and then on the image http://jsfiddle.net/omrf0dxe/
Thanks a lot!
Edit: The img children is an example, it might be other type of elements as well like divs,links etc
Edit2: Ok, apparently the solution was to use mouseleave instead of mouseout when binding the "exit" event.

You are listening to the events mouseenter/mouseout.
You want the events mouseenter/mouseleave:
Example Here
$(".parent").on("mouseenter mouseleave", function () {
$(this).toggleClass('hovered');
});
As an alternative, you could also add pointer-events: none to the child img element in order to essentially remove mouse events from the element:
Updated Example
.parent > img {
pointer-events: none;
}
Depending on what you're trying to achieve, you may not even need JS, though.
Just use the :hover pseudo class.
Example Here
.parent {
width:400px;
height:400px;
background:blue;
}
.parent:hover {
background:red;
}

Pretty basic solution, not sure if you want yours to stay toggled, but I would attack it with a add/remove class.
$('.parent').hover(
function(){ $(this).addClass('hovered') },
function(){ $(this).removeClass('hovered') }
)
http://jsfiddle.net/omrf0dxe/7/

Hiding a <div> and showing a new one in the same spot?

Lets say I have 2 divs, one is hidden, the other is showing. When a button is clicked, I want to use the jQuery fade effect to fade out one div and fade in the hidden div.
So -
<div id="part1">Hello</div>
<div id="part2" style="display: none">Hello2!</div>
<button id="btn1">Click here!</button>
and the JS -
$("#btn1").on("click", function(){
$("#part1").fadeToggle();
$("#part2").fadeToggle();
});
Now, this works, but as you can imagine what happens is that it first hides the 1st div, then shows the second div, and then immediately takes the second div up to the place where the previous div was located.
What can I do about this? I want them to stay in the same position (something like they have here http://kenwheeler.github.io/slick/ in their fade demo.)
Thanks!

You can do it with jQuery. Fade out the first div and fade in the second one in the callback. Like this: http://jsfiddle.net/D2Cw9/
$(".one").fadeOut(500, function() {
$(".two").fadeIn(500, function() {
});
});

One solution would be using absolute positioning on both divs relative to their container.
#parts-container {
position: relative;
}
#part1, #part2 {
position: absolute;
left: 0;
top: 0;
}

Use css position absolute to set them to the same position.

At the time of writing, you have 4 answers that all seem to be correct solutions using CSS positioning. I noticed you have jQuery as a tag, so I thought I'd offer up a different solution.
Have you thought about not actually hiding the div, and replacing it with the other? For example, you could change the CSS class of the div with jQuery:
$('#part1').fadeOut(300, function() {
$('#part1').addClass('part2');
$('#part1').innerHTML('Hello2!');
$('#part1').fadeIn(300, function(){});
});
Of course you should use a synchronous fade to make sure the class change happens while the div is hidden.

It seems that a lot of people answered this question correctly. I would like to add that you can also keep the div and just set the css opacity to 0 using the jQuery UI color animation.
I believe this is yet another option.

Try adding position absolute to both of them and wrapping them in a relative div

How to add a class to a div, make it wait a while, and then add another class to another div?

So far I can apply a class to one div but I want it to then add another class to another div to make that show and fade in down.
http://www.penguinie.co.uk/test/
I want the first page to fade out and the about page fade in (or the projects or contact page).
<li>About</li>
That is what I used to make the main page fade out. The class hidden is used to hide the about page until the user clicks on the about link.
.hidden {
display: none;
}
.show {
display: inline;
}

You can do this with built-in jQuery methods fadeIn and fadeOut.
$('#start').fadeOut(500, function(){
$('#about').fadeIn(500);
})
This way, #about will fade in right after #start fades out. If you want different a different animation, you can use the animate method to specify your animation.
You can also use the setTimeout method but as far as I can see, you want one div to disappear and the other div to appear right after. I think chaining two animations would be the better option in this case.
Also, #pszaba is right. You shouldn't use onclick attributes. You should use event handlers like the click handler like this:
$("#about").click(function(){
$('#start').fadeOut(500, function(){
$('#about').fadeIn(500);
});
});
(This code actually doesn't make sense since the #about element is invisible so it cannot be clicked :) Just use it as a reference for your own implementation.)

I think you're looking for setTimeout() function :
$('#start').addClass('fadeOutUp');
setTimeout(function() {
// executed after 2 seconds
$('#about').addClass('animated fadeInDown');
}, 2000);
EDIT: but about fadeIn / fadeOut, you can also take a look on $("selector").fadeIn("slow", function(){ /* callback here */ });

Sliding from side with jquery (without Jquery UI)

I want to make specialist_pagecontent to appear (slide) from the left, like blindleftin from here but I just can't make it work with this. Actually, the plan is, instead of hide() ideal would be blindLeftOut('fast');hide(), and instead of show() I need show();blindLeftOut('slow'), but as I said, I just can't make blindLeftOut and blindLeftIn work for me.

I think jQuery's animate function might be of use to you.
What you'd need to do is either have a hidden div positioned out of the window added to your HTML (or maybe add it dynamically using jquery on document.ready event, if you prefer) and the use the above mentioned animate function to slide it in and out and bind it to the menu item's click function.
Working Fiddle
Here is a working JSFiddle for you

Give the elements you want to animate in and out a viweport. A layer through which you look to see the elements within. Then set this viewport's overflow property to hidden and give it a specific width/height.
This way you can animate the elements within the viewport so they appear to slide in/out.
Here are the changes I'd make to your JS:
//notice the use of the "active" class to save state
$('.specialist_pagecontent').eq(0).addClass("active").animate({ left : 0 }, 500);
$('.specialist').click(function() {
//stop() is used to stop the current animation, so animations don't queue up if many buttons are clicked rapidly
$('.specialist_pagecontent').filter(".active").removeClass("active").stop(true).animate({ left : '-100%' }, 500);
$('.selected-specialist').removeClass('selected-specialist');
$(this).addClass('selected-specialist');
$('.specialist_pagecontent').eq($(this).index('.specialist')).addClass("active").stop(true).animate({ left : 0 }, 500);
});
And here are my suggested edits to the CSS:
.specialist_pagecontent {
position:absolute;
top:0;
left:-100%;
}
#specialist_lists {
float:left;
border: 1px solid #000000;
position:relative;
width:200px;
height:200px;
overflow:hidden;
}
Here is a demo: http://jsfiddle.net/Jwkw6/1/
This absolutely positions the elements that are to be animated, which is very useful since it removes the elements from the regular flow of the document (meaning it won't trigger whole page redraws when it animates). This also creates the viewport I mentioned, creating a window into which we look to see the animations.

Hover over image to show buttons and don't trigger when hovering over actual buttons

I'm trying to get buttons to appear when hovering over an image. The following works:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions.

The simplest solution is to put the two in the same parent div and give the parent div the show-image class.
I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)
Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.
Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?
JS:
jQuery(function() { // <== Doc ready
jQuery(".the-buttons").hide(); // Initially hide all buttons
jQuery('.show-image').hover(function() {
jQuery(this).find('.the-buttons').fadeIn(1500); // use .find() !
}, function() {
jQuery(this).find('.the-buttons').fadeOut(1500); // use .find() !
});
});
Try it out with this jsFiddle
HTML: - Something like this
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>​
CSS: - Something like this. Yours will likely be different.
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }​

Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.
Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)