Develop Reference

On hover slide image left (jQuery) and back if no hover

First, thanks for reading my question. I'm trying to make grid of 3 images that slide over each other when a user hovers over it. I've seen this on many websites but I don't know what this effect/plugin is called. So I made a image and a fiddle of what I'm trying to accomplish.
The start:
3 images positioned horizontally. The first image is almost completely visible except for some tab-like bars on the right. When you would hover over the second image it will slide to the left leaving only a small (again) tab-like bar on the right. The same goes for the third image. See this image I've made.
If a user doesn't hover any of the images it just goes back to the default of showing the first image and the second and third image in tab-like state.
I've also made a fiddle here to show the way the images should be animated.
But as you can see this is not perfect. Does anyone here have a snippet I could use because my jQuery skills are not there yet. But I think this (should) could be accomplished easier and with less code I think? And even maybe more elegantly.
Thanks for the (long) read...

This is simple example ;]
$('li').hover(function() {
$(this).addClass('active');
}, function(){
$(this).removeClass('active');
})
li {
width: 0;
padding: 15px;
float: right;
height: 300px;
overflow: hidden;
cursor: pointer;
color: #fff;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: green;
}
li:nth-child(3) {
background: blue;
}
li.active {
width: 400px;
transition: all 1s;
}
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>

Try zAccordian jquery plugin. https://natearmagost.github.io/zaccordion/index.html

So I changed your example a bit:
What I did was:
Changed positions to relative and set overflow hidden to .wrapper
$(document).ready(function(){
$(".img-1").hover(function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
});
$(".img-2").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
});
$(".img-3").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
$('.img-3').stop().animate({'left': '40px'}, 500);
}, function(){
$('.img-3').stop().animate({'left': '180px'}, 500);
$('.img-2').stop().animate({'left': '160px'}, 500);
});
});
.img-1 {position:relative;top:0px; background-color:red; width: 200px; Height: 50px;}
.img-2 {position:relative;top:-50px;left:160px; background-color: #1F6; width: 200px; Height: 50px;}
.img-3 {position:relative;top:-100px;left:180px; background-color: #0FF; width: 200px; Height: 50px;}
.wrapper {
border: black 1px solid;
width: 200px;
Height: 50px;
position:relative;
overflow: hidden;
top:0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="img-1">
</div>
<div class="img-2">
</div>
<div class="img-3">
</div>
</div>

You can do this completely with CSS, no need for javascript.
The example below manipulates the z-index when a div is hovered. The only tricky one is the hover of 'image-3'. The z-index of 'image-2' needs to be changed also to ensure it is on top of 'image-1'.
Therefore, in the HTML 'image-2' is placed after 'image-3'. Than in CSS 'image-2' can be addressed as a sibling.
[class^="img"] {
position: absolute;
top: 0;
left: 0;
}
.img-1 {
z-index: 3;
}
.img-1 img {
border: 6px solid #FF0;
}
.img-2 {
left: 20px;
z-index: 2;
}
.img-2 img {
border: 6px solid #F00;
}
.img-3 {
left: 40px;
z-index: 1;
}
.img-3 img {
border: 6px solid #F60;
}
div[class^="img"]:hover {
z-index: 5;
}
.img-3:hover+.img-2 {
z-index: 4;
}
<div class="wrapper">
<div class="img-1">
<img src="//placehold.it/200x50&text='image-1'" alt="">
</div>
<div class="img-3">
<img src="//placehold.it/200x50&text='image-3'" alt="">
</div>
<div class="img-2">
<img src="//placehold.it/200x50&text='image-2'" alt="">
</div>
</div>

Onclick Outside of the div hide div [duplicate]

This question already has answers here:
Use jQuery to hide a DIV when the user clicks outside of it
(40 answers)
Closed 7 years ago.
i need in jquery it is simple for experience. i opened a pop-up on click on a div but i want to hide it on click out-side of the the div. now it is hiding only when i click on close button. The close is
<a class="close-up" href="#" onclick="popup('popUpDiv')" >X</a>
and the div is
<div id="blanket" style="display:none;"><a class="close-up" href="#" onclick="popup('popUpDiv')" >X</a></div>
<div id="popUpDiv" style="display:none;"> <div class="main-navBar">kfbkasfkafkja</div> </div>
please help in it Thanks in advance.....

Try this:
$(document).mouseup(function (event)
{
var container = $("#popUpDiv");
if (!container.is(e.target) && container.has(event.target).length === 0)
{
container.hide();
}
});

Here is an example I built using jQuery. Rather then watching everything outside of a div it adds a blanket and waits for the user to click that. What you are looking for is very similar to Bootstrap's modals.
$('#open-popup').click(function() {
$('#popup').show();
});
$('.popup_wrap .blanket').click(function() {
$(this).parent().fadeOut(100);
});
html,
body {
border: 0;
margin: 0;
height: 100%;
width: 100%;
}
.popup_wrap{
display: none;
}
.popup_wrap,
.blanket {
height: 100%;
width: 100%;
position: absolute;
}
.blanket {
z-index: 1000;
display: inline-block;
background-color: rgba(0, 0, 0, 0.5);
}
.popup {
z-index: 1001;
display: inline-block;
position: absolute;
background-color: #fff;
width: 50%;
margin: 50px 25% 0 25%;
padding: 5px;
}
.fake-link{
text-decoration: underline;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='popup' class='popup_wrap'>
<div class='popup'>
Some text...
</div>
<div class='blanket'></div>
</div>
<span id='open-popup' class='fake-link'>Open Popup</span>

Jquery slideup slidedown unexpected behavior

I found a lot of similar questions but could not find the answer which could solve my problem.
I have a div with id 'first'. All I want is slidedown another div with id 'second' over the first one when mouse is on div 'one' and slideup div 'second' when the mouse is out of that div.
The code below works well but it has some problems.
1) when the mose is in - it slides twice.
2) when the second div is down and I move mouse over the div, it slides again
Could you please help me to get the result I want.
html
<div>
<div id="zero"><div>
<div id="my_hover">
<div id="second"></div>
<div id="first"></div>
</div>
<div id="third"></div>
</div>
js
$(document).ready(function(){
$("#first").mouseenter(function(){
$("#second").stop().slideDown("slow");
});
$("#first").mouseout(function(){
$("#second").slideUp("slow");
});
});

The easiest way is to add pointer-events: none; to the #second div CSS and position it above the #first div.
pointer-events: none; In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.(...)
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
Reference
$(document).ready(function(){
var slide = $("#second");
$("#first").hover(function(){
slide.stop().slideDown("slow");
},function(){
slide.slideUp("slow");
});
});
#first {
width: 100px;
height: 100px;
background:red;
}
#second {
position: absolute;
display: none;
width: 100px;
height: 100px;
background:blue;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="second">Second</div>
<div id="first">First</div>
Another way is to insert these two elements inside another element and use hover for that element instead of div #first. This way, the whole area is sensitive:
$(document).ready(function(){
var slide = $("#second");
$(".my-hover").hover(function(){
slide.stop().slideDown("slow");
},function(){
slide.slideUp("slow");
});
//for demo:
$('.btn').click(function(){
alert('it works!');
});
});
#first {
width: 100px;
height: 100px;
background:red;
}
#second {
position: absolute;
display: none;
width: 100px;
height: 100px;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=my-hover>
<div id="second"><button class=btn>BUTTON</button></div>
<div id="first">First</div>
</div>

I have tried your code and it's working well:
$(document).ready(function(){
$("#first").mouseenter(function(){
$("#second").stop().slideDown("slow");
});
$("#first").mouseout(function(){
$("#second").slideUp("slow");
});
});
See Example:
http://jsfiddle.net/dwxxpabq/

Okay here you go :
var $second=$("#second");
$("#first").hover(function(){
$second.stop().slideDown("slow");
},function(){
$second.stop().slideUp("slow");
});
div{
width: 100px;
height: 100px;
background: green;
margin-right: 10px;
float: left ;
position: absolute;
top:0;
left:0;
}
#second{
display: none;
background: yellow;
pointer-events : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">1</div>
<div id="second">2</div>

You can put the second div as a child of first div and by using relative/absolute positioning you can achieve what you want.
$(document).ready(function() {
var slide = $("#second");
$("#first").hover(function() {
slide.stop().slideDown("slow");
}, function() {
slide.slideUp("slow");
});
});
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#second {
position: absolute;
top: 0;
left: 0;
display: none;
width: 100px;
height: 100px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">First
<div id="second">Second
<button>click me</button>
</div>
</div>

jquery event where clicking a hyperlink switches the class of another div

I want to reveal a hidden div when a hyperlink (with an anchor on the hidden div) is clicked. My research has led me to believe that using .switchClass is the way to go, but for the life of me I haven't been able to get it to work. Here's what I've got:
HTML
<!-- link -->
<div id="rightnest">
<p>
You likely have a few questions, and maybe some of them can
<br>be answered
<a href="#questions" class="smoothScroll">
<ins>here</ins>
</a>.
</p>
</div>
<!-- hidden div that should gain .centernest on click -->
<div class="hide">
<p> a lot of text</p>
</div>
CSS
.hide {
height: 400px;
left: 200px;
padding-top: 10px;
position: absolute;
top: 5px;
vertical-align: top;
visibility: hidden;
width: 700px;
}
.centernest {
height: 400px;
left: 200px;
padding-top: 10px;
position: absolute;
top: 5px;
vertical-align: top;
visibility: visible;
width: 700px;
}
there's .hide p, .hide h1, hide p a:link as well – all with visibility:hidden; (same for the .centernest class)
JavaScipt
$(function() {
$("<ins>here</ins>").click(function(){
$(".hide").switchClass("hide", "centernest", 100);
return false;
});
});

Try this:-
$(function() {
$(".smoothScroll").click(function(){
$(".hide").css( "visibility", "visible" );
});
});
Fiddle

Call the click event with the hyperlink class.
$(function() {
$(".smoothScroll").click(function(){
$(".hide").switchClass("hide", "centernest", 100);
return false;
});
});

Keep Div visible after mouse moves from trigger (jQuery)

I am currently building a layout where I have several 'triggers' inside a <nav><ul><li><a> element - each display a <div> which effectively sits 'behind' (z-index).
I need the divs (#showme and #showmetoo) to stay visible even if the user moves the mouse from the respective trigger (.thetrigger, .thenextrigger) - as the divs will contain content/links.
Additionally, when the user moves from one trigger to the next the displayed div should change.
<header>
<nav>
<ul>
<li><a class="thetrigger">Show Me That Thing</a></li>
<li><a class="thenexttrigger">Show Me That Thing</a></li>
</ul>
</nav>
<div id="showme">Yay, this thing</div>
<div id="showmetoo">and this thing</div>
</header>
CSS
header {
width: 100%;
height: 300px;
position: relative;
background: red;
z-index: 1;
}
nav {
position: absolute;
top: 10px;
left: 30px;
z-index: 3;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
padding: 30px;
}
.thetrigger, .thenexttrigger {
color: white;
}
#showme {
display: none;
background: blue;
color: white;
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 100%;
z-index: 2;
}
#showmetoo {
display: none;
background: green;
color: white;
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 100%;
z-index: 2;
}
jQuery
$(document).ready(function() {
$('.thetrigger').hover(function() {
$('#showme').fadeIn();
}, function() {
$('#showme').fadeOut();
});
$('.thenexttrigger').hover(function() {
$('#showmetoo').fadeIn();
}, function() {
$('#showmetoo').fadeOut();
});
});
http://jsfiddle.net/richardblyth/24bcs/

Demo
It sounds like you want the div to remain until the next trigger is hovered over.
You can use a lot less jQuery if you use a class for the triggers, and find their respective divs using data. With this you can add as many triggers + corresponding divs as you like without having to write more jQuery.
HTML
<header>
<nav>
<ul>
<li><a class="trigger" data-show="pane1">Show Me That Thing</a></li>
<li><a class="trigger" data-show="pane2">Show Me That Thing</a></li>
</ul>
</nav>
<div class="pane" data-show="pane1" id="showme">Yay, this thing</div>
<div class="pane" data-show="pane2" id="showmetoo">and this thing</div>
</header>
jQuery
$(function(){
$('.trigger').on('mouseover', function(){
// show the desired pane and hide its siblings
$('.pane[data-show="' + $(this).data('show') + '"]').fadeIn().siblings('.pane').fadeOut();
});
});

I think what you actually want, if I understand you question, is to hide the other #showme element when you hover into the trigger element associated with the #showmetoo element.
Like this:
$(document).ready(function() {
$('.thetrigger').hover(function() {
$('#showme').fadeIn();
$('#showmetoo').fadeOut();
});
$('.thenexttrigger').hover(function() {
$('#showmetoo').fadeIn();
$('#showme').fadeOut();
});
});
http://jsfiddle.net/4N26S/