Develop Reference

Darken screen when clicking on a link then redirect

I have the following project.
What I want is, when a user clicks on any link on the page, to slowly hide the image with the class map and smoothly display the black background, then return to its usual behaviour, redirecting the user to the next page.
My guess is that preventDefault() is the solution here together with some CSS like this one:
.hideImg{
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0.3s linear,
opacity 0.3s linear;
-moz-transition: visibility 0.3s linear,
opacity 0.3s linear;
-o-transition: visibility 0.3s linear,
opacity 0.3s linear;
}
body{
background-color:#000;
}
However, I fail to make them work together and create a JS that waits for the hiding animation to occur and then redirect.
How can I achieve this?

Try something like this:
$('a').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href');
// For one item
$('.map').animate({"opacity": "0"}, 1000, function() {
window.location.href = href;
});
// Or, for multiple classes - all doing the same thing
$('.map, .another-item, .another-class').animate({"opacity": "0"}, 1000, function() {
window.location.href = href;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Google
<div class='map' style="background: black; width: 300px; height: 300px;"></div>

You can add a class to the container that's holding the image.
And add an additional timeout before you go the new page.
$(".x").on('click', function(e) {
e.preventDefault();
$('div').addClass('darken');
window.setTimeout(function() {
window.location.href = 'https://www.google.com'; // this will navigate to the new page after 2s
}, 2000);
});
body {
background: black;
}
.warpper-map {
width: 500px;
height: 200px;
}
img.map {
width: 100%;
height: 100%;
}
.darken {
opacity: 0;
transition: opacity 2s ease; /* Makes smooth transition */
/* You can increase the time to make the transition much longer */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class='x' href="#">Click to Darken</a>
<div class='wrapper-map'>
<img class='map' src="https://sporedev.ro/pleiade/images/Lobby.jpg">
</div>

I think this should do the work for you using jQuery:
$('a').on('click',function(e){
e.preventDefault;
$(this).addClass('hideImage');
$('.hideImage').on('animationend webkitAnimationEnd',function(){
window.location.href = $(this).attr('href');
})
});
or just give you the idea of how to fix it.
best of luck

Animation inside Block in hidden state

Does animation work if the block content is in state "none"?
For example, if I want to use Load with JQuery, and I want animation to start after the page load, will this work?
.container {
display : none;
}
.container .animate {
transform : translate(0,-100px);
transition : 1s transform ;
}
.show {
display : block ;
}
in jquery
$(function() {
$(".container").addClass("show");
});
If there is another way please help me.

Looks like display:none elements can be animated...
Here's a test : the text is hidden, translates to the right, then shows up : it works.
$("p").addClass("shift");
setTimeout( function(){
$("p").css("display","block");
}, 1000)
p{
display:none;
border:green solid 1px;
width:150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
p.shift{
transform : translate(300px,0);
-webkit-transform: translate(300px,0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>some text</p>
Is this what you want?

Just try to change the attr
$(function() {
$(".container").attr("display","block !important");
});

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>

Hide a div on hover outside of div

<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/

How to create sliding DIV on click?

I am looking to create a slide out DIV, like the one here when you press "Contact". Does anybody know of anything similar to this?

Making use jQuery's slideToggle() method could help you do this.
Example
HTML:
<div id="contact">
Contact me!
</div>
Contact
CSS:
#contact
{
display: none;
background: grey;
color: #FFF;
padding: 10px;
}
JavaScript:
$(function()
{
$("a#toggle").click(function()
{
$("#contact").slideToggle();
return false;
});
});

If you don't want to use jQuery and you can stick to modern browsers you can try:
Demo: http://jsfiddle.net/ThinkingStiff/EVyE8/
HTML:
<div id="slide">click me</div>
CSS:
#slide {
height: 50px;
transition: height 500ms ease;
-moz-transition: height 500ms ease;
-ms-transition: height 500ms ease;
-o-transition: height 500ms ease;
-webkit-transition: height 500ms ease;
}
Script:
document.getElementById( 'slide' ).addEventListener( 'click', function() {
this.style.height == '50px' || this.style.height == ''
? this.style.height = '150px'
: this.style.height = '50px';
}, false );

yet another sample, but without jquery, and with a class add/remove approach :)
Demo: http://jsfiddle.net/1wbh8pqj/
The main idea is that you have two classes, one of them applies to the slider, and the another, says how the slider should show when it is expanded.
.slider {
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
}
.slided {
height: 100px;
}
so, you have to set the 'slided' class to the slider when it has to be expanded, and remove it when the slider has to be shrinked, and using the super-mega-uber-awesome css transition, the height will smoothly change :)
var expander = document.getElementById("expander");
expander.addEventListener("click", function () {
var slider = document.getElementsByClassName("slider")[0];
if (slider.classList.contains("slided")) {
slider.classList.remove("slided");
} else {
slider.classList.add("slided");
}
});
ohbtw, the html:
<div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>

Another sample
Sample
http://jsfiddle.net/9cdYR/
HTML
<div id="slide">
Slide content<br />
Slide content<br />
Slide content<br />
</div>
<div id="content">
Content<br />
Content<br />
Content<br />
</div>
<button id="slide_button">Slide it</button>
CSS
#content {
background-color: #c0c0c0;
border: 1px solid blue;
}
#slide {
border: 1px solid red;
background-color: #000;
color: #fff;
overflow: hidden;
}
JS
$('#slide_button').click(function() {
$('#slide').animate({
height: 'toggle'
}, 1500, function() {
});
});

With jQuery, you make the div and add display:none with css. Then, something like:
$('.button').click(function(e){
e.preventDefault();
$('#mydiv').slideToggle();
});

The almighty jQuery comes to a rescue, once again.
If you don't want to use jquery, just set a timer and increase the height.