Hide a div on hover outside of div - javascript

<div id='container'>
<div id="animate"></div>
</div>
I have a small div inside a big div with id container . i want to hide div with id animate if someone hovers the out side of small div . it should remain open when mouse is over the small div .

This should do it
$('#small').hover(function () {
$('#animate').show();
}, function () {
$('#animate').hide();
});

Try:
CSS:
#container{width:100px;height:100px;background:#F00;}
#animate{width:50px;height:50px;background:#0F0;}
Script:
$(function(){
$('#container').mouseenter(function(){
$('#animate').fadeTo(1000,0)
.mouseenter(function(){$(this).fadeTo(1000,1)});
}); // use 750 in place of 1000 to animate it fast
});
Docs http://api.jquery.com/mouseenter/
HTML:
<div id='container'>
<div id="animate"> </div>
</div>
Fiddle: http://jsfiddle.net/aZmfz/4/

HTML:
<div id='container'>
<div id="animate">HI!</div>
</div>
CSS:
#container{
width: 100px;
height: 200px;
background-color: black;
}
#animate{
height: 50px;
width: 100px;
background-color: white;
opacity: 0;
}
jQuery:
$("#animate").hover(
function(){
$(this).stop().animate({
opacity: 1
}, 1000);
},
function(){
$(this).stop().animate({
opacity: 0
}, 1000);
}
);
EXAMPLE
You may not want to do a strict show/hide, because the element will have no height/width to hover over when it's hidden. Instead, you may prefer to set the opacity to 0 (to hide) or 1 (to show) and let the animate function transition between the two. You'll also notice that I used the .stop() function. This is because if you hover back and forth over the element it will continue to call the queued up animations. Calling stop first will prevent this.

You can achieve the same effect with pure CSS:
#animate {
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
#container:hover #animate {
opacity: 0;
}
#container #animate:hover {
opacity: 1;
}
Demo: http://jsfiddle.net/gXz2A/

Related

Animate Position Change As Div Floats Left

I have a bunch of divs that live inside a container. When a user clicks on one of them they are removed and a divs below that one slide over to fill the space it left because they are set to float:left like this jsFiddle. I want the divs to animate as they move over to fill the space. Is there a CSS or jQuery function to automatically do that, or would I have to calculate the position each div is currently in and then call some kind of animateAll() to move them to the position that they will be?
Add $(this).addClass('hide').fadeOut(500, function() { $(this).remove(); }); to hide and remove that child after transition
demo:-
$("div").click(function(){
$(this).addClass('hide').fadeOut(500, function() { $(this).remove(); });
});
div {
float:left;
height:20px;
width:20px;
margin:5px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
div:hover {
cursor:pointer;
}
.hide {
width: 0;
height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background:red;"></div>
<div style="background:orange;"></div>
<div style="background:yellow;"></div>
<div style="background:green;"></div>
<div style="background:blue;"></div>
<div style="background:purple;"></div>
Check this fiddle
Please check this script.
$("div").click(function(){
$(this).css('opacity',0).animate({
width: 0,
}, 1000, function() {
$(this).remove();
});
});
try this
$("#divname").click(function(){
$("div").animate({"width":"0px"}, "slow",function() {
$(this).remove();
});
});
you can use jquery animate
$("div").click(function(){
$(this).remove();
$("div").animate({"left":"0px"}, "slow")
});

Trigger opacity transition on mouse in and out

I want to trigger a opacity transition. If an element is hovered by the cursor, the cursor shall fade out, change its background-image and then fade in again. I wanted to achieve that by adding and removing a css class. It's not working, what is wrong?
js fiddle
HTML
<div class="wrapper">
<div class="cursor">
</div>
<div id="grey">
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 60px;
cursor: none;
}
#grey {
width: 100px;
height: 100px;
background: grey;
}
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .3s; /* Safari */
transition: opacity .3s;
}
.red {
background: red;
opacity: 1;
}
.green {
background: green;
opacity: 1;
}
JS
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
$('.cursor').removeClass('green').addClass('red');
}else{
$('.cursor').removeClass('red').addClass('green');
}
});
DEMO HERE
Ok, here you go. You need to keep track of 2 things here which you already achieved partially and also wait for fadeOut to complete and add a callback for adding and removing respective class
Whether cursor has entered element
Whether cursor has left element
Below is how you could actually do it.
var entered=false;//global variables to show the position of cursor
var left=false;
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
if(!entered)
{
//just to do it once and not on every mousemove you need to check here whether
//it has already entered and moving inside the element
entered=true;
left=false;//to check the vice versa operation
$('.cursor').fadeOut('fast',function(){
//callback function after fadeOut completes
$(this).removeClass('green').addClass('red');
}).fadeIn('fast');
}
}else{
if(!left)
{
left=true;
entered=false;
//same goes here too
$('.cursor').fadeOut('fast',function(){
$(this).removeClass('red').addClass('green');
}).fadeIn('fast');
}
}
});
you have to change background color , not opacity ( opacity is always 1 )
CSS
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: background-color .3s; /* Safari */
transition: background-color .3s ;
}
.red {
background-color: red;
opacity: 1;
}
.green {
background-color: green;
opacity: 1;
}
So you said your question is wrong, it is "no, I just made it easier for hier, in reality it is an background image" - so you transition between two background-images.
Here is how you do it:
You can not do it with CSS transition in ONE element/div
You will have to make two divs wich one background each
Increase the zIndex of the div you want to fade out in by one
Fade out div, while the new div stays at opacity: 1

jQuery: Is it possible to use slideUp and append text at the same time?

When a user mouses over a picture, I want to slideUp a description, so that new text will appear. When the user mouses out, the description will slideDown.
This is what I've tried so far:
$pic1.hover(function () {
var text1 = $("<div>Price1:$100</div>").hide();
text1.appendTo($('.this')).slideUp("slow");
},function () {
$(this).slideDown();
}
);
Unfortunately, this doesn't work. I googled around, but couldn't find anything. Is it possible to use slideUp and slideDown to show and hide the text?
A better approach would be to use CSS transitions. They're lightweight and easy to do. You can read the specification on transitions here. Here is a quick guide on the matter.
fiddle
HTML
<div class="imageDiv">
<img src="http://placekitten.com/g/200/300" />
<div class="imageDescription">
What a lovely kitty kat!
</div>
</div>
CSS
.imageDiv {
display: block;
float: left;
overflow: hidden;
position: relative;
width: 200px;
}
.imageDescription {
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
-ms-transition: top 0.5s ease;
-o-transition: top 0.5s ease;
transition: top 0.5s ease;
background: rgba(0, 0, 0, 0.4);
color: #f7f7f7;
left: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 100%;
width: 100%;
}
.imageDiv:hover .imageDescription {
display: block;
top: 93%;
}
There a few key things that make this work. First, a CSS transition is used. Transitions are written in the following form:
transition: [property] [duration] [timing-function] [delay];
As can be seen in the example above, I used a transition that targeted the top attribute. I gave it a 0.5s duration and an ease effect. However, this alone wouldn't produce the effect, as the description would just sit below the image and move up on hover. We don't want to see the description until the user hovers over the image!
To address this, you need to add overflow: hidden; to the parent div.imageDiv. This hides the image description, until the transition, when it will be slide up, causing it to no longer overflow.
http://jsfiddle.net/qvbgb/3/
HTML
<div class="imgcontainer">
<div class="image">
<img src="link.jpg" />
</div>
<div class="text">
<h3>Product name</h3>
<p>Description</p>
</div>
</div>
Jquery
$(document).ready(function(){
$('.text').hide();
$('.container').hover(
function () {
$(this).find('.image').slideUp();
$(this).find('.text').slideDown();
},function () {
$(this).find('.text').slideUp();
$(this).find('.image').slideDown();
}
);
})
CSS
.container{
min-width : 150px;
min-height : 150px;
width : 150px;
height : 150px;
cursor : pointer;
display : block;
}
.image img{
width : 150px;
height : 150px;
}
slideUp() will only hide an element, and slideDown() will only show an element. If you want to show an element with slideUp effect or hide with slideDown effect, you have to explicitly call it:
$(text1).show("slide", { direction: "up" }, 1000);
$(text1).hide("slide", { direction: "down" }, 1000);

Issue on Smooth Toggle Sliding (Up)

Can you please take a look at this example and let me know why I am not able to have a smooth slide up in my layout? I mean there is a jump when the slide catches the inner well(.login).
<div class="container">
<div class="row top">
<div class="well well-sm col-md-2 col-md-offset-10"><a id="login">Login</a> | Register <i class="glyphicon glyphicon glyphicon-info-sign pull-right"></i>
<div class="well login"></div>
</div>
</div>
</div>
<script>
$("#login").click(function () {
$(".login").slideToggle();
});
</script>
and the CSS is :
.login {
display:none;
-webkit-transition: max-height 0.6s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
Thanks
The issue you are seeing is caused by a min-height style in the bootstrap.css. The min height is keeping the well from collapsing past 20px. When the well expands it actually immediately displays a height of 20px. However, this is odd behavior is really only noticeable while its collapsing.
.well {
min-height: 20px; <--- THIS STYLE
padding: 19px;
margin-bottom: 20px;
background-color: #well-bg;
border: 1px solid #well-border;
border-radius: #border-radius-base;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
You can specify the min-height with a more specific selector or applying a class to the well.
I simply applied a more specific selector to the well so it overrides the selector from the BootStrap.css.
div .well
{
min-height:initial;
}
http://jsfiddle.net/Ej72d/
While that works, I suggest applying another class to the well div called wellNoMinHeight
.well.wellNoMinHeight
{
min-height:initial;
}
http://jsfiddle.net/TM2J3/
I think the issue is that it is trying to slide down the div, however the div is awkwardly shaped (because of the well class). Here is my solution, using jquery animate instead of slidetoggle
http://jsfiddle.net/pmalbu/52VtD/4344/
Here is the JavaScript I used:
var flip = 0;
$("#login").click(function () {
if (flip++ % 2 === 0) {
$( ".login" ).animate({
'display': 'block',
'margin-top': "20px"
}, 300 );
$( ".login" ).show(200);
}
else {
$( ".login" ).hide(200);
$( ".login" ).animate({
'display': 'block',
'margin-top': "0"
}, 300 );
}
});

FadeIn FadeOut and why the div moves?

probably is something that I'm missing, but I have a little headache with this.
I'd like to have the "submenu div" align on the right of Show/hide links.
When I load the div is correctly in its place, but when I click to hide/show links, suddenly the div changes the place to the bottom.
BTW, is there any other better way to do this, or this this is good? Also, if I don't what to show the div on the page load, I'm thinking to use .hide() or hidden style, is that ok?
Example http://jsfiddle.net/DH75T/
Thanks in advance
CSS
div.inline2 {
display: inline-block;
width: 150px;
}
div.inline {
position:absolute;
display: inline-block;
border:1px solid #CCC;
background:#FFF;
}
JS
$(document).ready(function() {
$('a#show').click(function() {
$('div#submenu').fadeIn();
});
$('a#hide').click(function() {
$('div#submenu').fadeOut();
});
});
HTML
<div class="inline2">
Show_links
Hide links
</div>
<div class="inline" id="submenu">
Link 1<br />
Link 2
</div>
fadeIn() adds div style display: block; so div shows down to next line
Before div was styled inline-block
div.inline2 {
display: inline-block;
width: 150px;
}
fiddle Demo
Use classes to add effect of fadeIn and fadeOut without moving your div to next line
$(document).ready(function () {
$('a#show').click(function () {
$('div#submenu').removeClass('hidden').addClass('visible');
});
$('a#hide').click(function () {
$('div#submenu').addClass('hidden').removeClass('visible');
});
});
css
.visible {
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
Try:
$(document).ready(function() {
$('a#show').click(function() {
$('div#submenu').removeClass("none");
});
$('a#hide').click(function() {
$('div#submenu').addClass("none");
});
});
Fiddle here.
You need to change only jQuery code :) :
<script type="text/javascript">
$(document).ready(function() {
$('a#show').click(function() {
$( "div#submenu" ).animate({
opacity: 1
}, 500, function() {
// Animation complete.
});
});
$('a#hide').click(function() {
$( "div#submenu" ).animate({
opacity: 0
}, 500, function() {
// Animation complete.
});
});
});</script>

Categories

Resources