FadeIn and FadeOut with Javascript and no Jquery - javascript

I have an image map and when the user hovers over the map I want to fade-in a small div with informations on the hovered content, then upon the mouse leaving the map fade-out with a two second delay.

It's possible to do a fade effect by animating opacity using CSS transitions:
.small_div {
opacity: 0;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.small_div.active {
opacity: 1
}
To use this class, you will need to have some javascript to add the .active class when the image map is hovered and fill the .small_div with the necessary data.
IF you don't want to use a class, you can just change the opacity property directly using javascript and that change will also be animated.
Note that this will not work in older browsers like IE8, but it should degrade gracefully.

Unlike nullability suggests, you can do this fully with only CSS including the delay, no added classes involved. Here is a fiddle to prove it
HTML:
<div id='map'>
<div id='overlay'></div>
</div>
CSS:
#map {
height:100px;
width:100px;
background:red;
}
#overlay {
z-index:2;
background:black;
height:100px;
width:100px;
opacity:0;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#overlay:hover {
opacity:.8;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}

Related

How to remove scrollbar which is shown on using transform scale?

I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}
Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>

ng-if animation angularjs collapse

I've got a little issue using the animation in angularjs. I can expand and collapse a div but when i collapse it the content of the div disappear after the container collapse. It should be collapse together instead.. I made a jsfiddle here:
http://jsfiddle.net/7tb4g/119/
the css is very simple:
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition: 1s linear all;
-moz-transition: 1s linear all;
-ms-transition: 1s linear all;
-o-transition: 1s linear all;
transition: 1s linear all;
}
.animate-if.ng-enter {
max-height: 0;
opacity: 0;
}
.animate-if.ng-enter.ng-enter-active {
max-height: 999px;
opacity:1;
}
.animate-if.ng-leave {
max-height: 999px;
opacity:1;
}
.animate-if.ng-leave.ng-leave-active {
max-height: 0;
opacity:1;
}
thanks
Simple fix with overflow:hidden;
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition: 1s linear all;
-moz-transition: 1s linear all;
-ms-transition: 1s linear all;
-o-transition: 1s linear all;
transition: 1s linear all;
/* no overflow during animation */
overflow:hidden;
}
DEMO

Bootstrap multilevel dropdown slide effect?

I have a multilevel dropdown in a Bootstrap project I made. I need it to be so that the dropdowns would slide. How am I to accomplish that?
I have the following code done, but I need to add to it. Here's what the code does:
It opens and closes the specific dropdown if you click its dropdown toggle.
If you click outside the dropdown, but inside its parent, only the child dropdown will close; and if you click outside the parent, the parent will close, and so on.
If you click on the dropdown toggle of a child dropdown, it will only affect that dropdown and its children, not its parents.
I've read onto this answer to try and use it with my current solution, but I don't know how to get it to work properly: https://stackoverflow.com/a/19339162/1934402
I'm sure it does more specifications, but you get the idea. Here is a jsfiddle I made, too: http://jsfiddle.net/hhb9u7db/
For an example, I made the Collections link be a dropdown with T-shirts as another dropdown. I want it all to work exactly like how I have it working now, except that it slides.
$(function() {
$('.dropdown').on({
"click": function(event) {
if ($(event.target).closest('.dropdown-toggle').length && $(this).parents('.dropdown').length === ($(event.target).parents('.dropdown').length - 1)) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
"hide.bs.dropdown": function(event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});
Your fiddle is not totally clear for me. Your navbar has no .navbar class and your nav menus no .navbar-nav.
You can try to add the CSS code like that shown below:
.dropdown-menu,
.open > .dropdown-menu,
.dropdown-menu,
.open > .dropdown-menu .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-moz-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu .open .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-moz-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://jsfiddle.net/hhb9u7db/1/
resources:
Transitions on the display: property
http://davidwalsh.name/css-slide
For Bootstrap default navbar you can use the following Less code:
.dropdown-menu, .open > .dropdown-menu,
{
display:block;
max-height: 0;
overflow-y:hidden;
visibility:hidden;
transition:max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
{
max-height: 500px;
display:block;
visibility:visible;
transition:max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition-delay:0s;
}
Which compiles with the autoprefix plugin into the following CSS code (lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"):
.dropdown-menu,
.open > .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://www.bootply.com/dd5aFlGTTE

Animate addition of a class through jquery/javascript

I have:
<div class="button" id="button1">Click</div>
<div class="button" id="button2">Click</div>
and the JS
$('.button').click(function(){
$('.button').removeClass('selected');
$(this).addClass('selected');
});
CSS
.selected {
background-color: green;
}
Can I 'animate' the applying of the class 'selected'? I.e on a click of the div, the background slides in from the right or fades in for example? Is there a decent plugin available that could achieve this? Is there are a CSS workaround/method?
Simply use CSS3
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
Example
http://jsfiddle.net/tw16/JfK6N/
if you don't want to use CSS3 to support older Browsers use the done() callback of animate
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).animate({
backgroundColor: green
}, 1000, "linear", function() {
$(this).addClass('selected');
});
});
You can use css3 for that. Use transition to background color change.
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
Here is the example with your code:
http://jsfiddle.net/mm9mV/

Sliding Panels sitting underneath content?

This is a follow up on a previous question...I was helped out by Marcatectura (thanks again!) , and this is the example they gave me: http://jsfiddle.net/rt9d5/10/embedded/result/
I decided to change the 'li' elements to 'div' elements, as it works better for my intended design. But as I'm not that well versed in jquery I've done something wrong in trying to get mine to look the same. http://fiddle.jshell.net/faedince/L4L4N/ (Here's a little bit of my code.)
#panelOne:after {
display: block;
background: red;
opacity: 0.9;
width: 350px;
height: 350px;
content: "";
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
$( '#panelOne' ).click(function(){
$( '#panelOne' ).removeClass( 'clicked' );
$(this).addClass( 'clicked' );
});
The red covers are sitting underneath the white panels, and are too far down the page. As per the example they're supposed to be on top of the white panels. Could someone tell me what I'm doing wrong please?
It looks like you need to add position: absolute to your :after classes (along with the top and left positioning). You can also get away with simplifying your JS a bit. Instead of trying to code for every possible click combination, make one bit of code that can apply to all of them.
Demo Fiddle
CSS: you can replace all of your individual :after css calls with the following.
.bigbox > div:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
display: block;
background: red;
opacity: 0.9;
width: 350px;
height: 350px;
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
}
JS:
$('.bigbox div').on('click', function(){
$('.bigbox div').removeClass('clicked');
$(this).addClass('clicked');
});

Categories