When I switch between classes at first time, opacity transition doesn’t work.
When I switch back, it does work. I tried removing visibility property and leaving just opacity, did not work.
const navList = document.querySelector('.nav-list')
if (navList.classList.contains('invisible')) {
setTimeout(function() {
navList.classList.add('visible'), navList.classList.remove('invisible');
}, 1000);
} else {
setTimeout(function() {
navList.classList.add('invisible');
});
navList.classList.remove('visible');
}
.visibile {
opacity: 1;
visibility: visible;
transition: all ease-in 1s;
}
.invisible {
opacity: 0;
visibility: hidden;
transition: all ease-in 1s;
}
<ul class="nav-list invisible text-center mt-5">
<div class="">
<div class="">
<div>
<li class="p-3 underline">Home</li>
<li class="p-3 underline">About</li>
<li class="p-3 underline">Contact</li>
</div>
</div>
</div>
</ul>
As mentioned in the comments, put the transition on a class that's always present, eg nav-list. I would also recommend putting some state on that class so then you only need to toggle one other class (instead of two).
const navList = document.querySelector('.nav-list')
setInterval(() => {
navList.classList.toggle('invisible')
}, 2000)
.nav-list {
transition: all ease-in 1s;
opacity: 1;
visibility: visible;
}
.nav-list.invisible {
opacity: 0;
visibility: hidden;
}
<ul class="nav-list invisible text-center mt-5">
<div class="">
<div class="">
<div>
<li class="p-3 underline">Home</li>
<li class="p-3 underline">About</li>
<li class="p-3 underline">Contact</li>
</div>
</div>
</div>
</ul>
Related
I have some javascript set up so that when I hover an image, it changes to a different image. The only problem is, that it's instant. How would I add a transition to this to make it smooth, to fade between the images?
<div class="social">
<ul class="sociallinks">
<li>
<a href="https://www.linkedin.com/in/lee-jordan">
<img class="linkedinIcon" src="assets/images/linkedin.png" />
</a>
</li>
<li>
<a href="https://github.com/loxol">
<img class="githubIcon" src="assets/images/github.png" />
</a>
</li>
</ul>
</div>
$(document).ready(function() {
$(".linkedinIcon").hover(function() {
$(this).attr("src", "assets/images/linkedinhover.png");
}, function() {
$(this).attr("src", "assets/images/linkedin.png");
});
});
You can do it on different ways, but you can't fade the same image when replacing the src. You could use two img tags, or even place the hover image as background of the img tag, and fade out the image on hover using css transitions. Here is one example:
$(function() {
$(".linkedinIcon").hover(function() {
$(this).css("opacity", 0);
}, function() {
$(this).css("opacity", 1);
});
});
ul.sociallinks {
list-style: none;
}
ul.sociallinks a {
width: 300px;
height: 200px;
display: block;
}
ul.sociallinks img {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social">
<ul class="sociallinks">
<li>
<a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
<img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
</a>
</li>
</ul>
</div>
Even possible without JS at all, css only:
ul.sociallinks {
list-style: none;
}
ul.sociallinks a {
width: 300px;
height: 200px;
display: block;
}
ul.sociallinks img {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
ul.sociallinks img:hover {
opacity: 0;
}
<div class="social">
<ul class="sociallinks">
<li>
<a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
<img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
</a>
</li>
</ul>
</div>
Here is a plain css3 solution:
ul.sociallinks a img {
position: absolute;
top: 0;
height: 250px;
}
.animate {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.changeDisplayOnHover .showOnHover {
opacity: 0;
}
.changeDisplayOnHover .hideOnHover {
opacity: 1;
}
.changeDisplayOnHover:hover .showOnHover {
opacity: 1;
}
.changeDisplayOnHover:hover .hideOnHover {
opacity: 0;
}
<div class="social">
<ul class="sociallinks">
<li>
<a href="#" class="changeDisplayOnHover">
<img class="hideOnHover animate" src="https://66.media.tumblr.com/avatar_8107bb8004a8_128.png" />
<img class="showOnHover animate" src="http://www.aqua-soft.org/forum/uploads/post-25-1229846653.png" />
</a>
</li>
</ul>
</div>
2 effects using CSS:
.changeableImage {
background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
display:block;
width:300px;
height:200px;
transition: padding 2s;
box-sizing:border-box;
overflow: hidden;
}
.changeableImage:hover{
padding-top:200px;
}
.changeableBG {
background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
display:block;
width:300px;
height:200px;
transition: padding 2s;
box-sizing:border-box;
overflow: hidden;
}
.changeableBG img{
display:block;
width:300px;
height:200px;
transition: all 2s;
box-sizing:border-box;
overflow: hidden;
position:relative;
}
.changeableBG img:hover{
transform: translateY(200px);
}
<div class="social">
<ul class="sociallinks">
<li>
<a href="#">
<img class="changeableImage" src="http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg" />
</a>
<br>
<a class="changeableBG" href="#">
<img src="http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg" />
</a>
</li>
</ul>
</div>
I am trying to change the speed of a fade effect in Bootstrap. I found this answer using css:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.fade {
opacity: 0;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
-ms-transition: opacity 1.5s linear;
-o-transition: opacity 1.5s linear;
transition: opacity 1.5s linear;
}
<div class="btn-group" role="group">
<button class="btn active" data-toggle="tab" href="#one">One</button>
<button class="btn" data-toggle="tab" href="#two">Two</button>
<button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
<div id="one" class="tab-pane fade in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
...but this only affects the fade-in time. The fade-out stays the same. Any suggestions?
There is no fade-out time, the class that makes the element visible just gets removed.
To make it fade-out, you have to make sure the item doesn't get removed from the dom (HTML document), but rather make it invisible so it can fade.
Here is an example, adjust to your wishes:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.tab-content {
position:relative;
}
.tab-content>.tab-pane {
/* in order to make sure the elements are nicely in position
use position:absolute; */
position:absolute;
top:0;
}
.fade {
opacity: 0;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
-ms-transition: opacity 1.5s linear;
-o-transition: opacity 1.5s linear;
transition: opacity 1.5s linear;
}
.tab-content>.tab-pane:not(.in) {
/* display:none; is the default behaviour, make that display:block; */
display:block;
/* make the opacity 0, that is what the transition responds to! */
opacity:0;
}
<div class="btn-group" role="group">
<button class="btn active" data-toggle="tab" href="#one">One</button>
<button class="btn" data-toggle="tab" href="#two">Two</button>
<button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
<div id="one" class="tab-pane fade in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The issue is that when an item is not active, it's display property is set to display:none, and therefore is being hidden before any animation can be applied. If you position everything using absolute position to overlap, then you can leave the display as display:block and just change the opacity:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.fade {
opacity: 0;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
-ms-transition: opacity 1.5s linear;
-o-transition: opacity 1.5s linear;
transition: opacity 1.5s linear;
}
.tab-content {
position:relative;
}
.tab-content>.tab-pane {
top: 0;
position:absolute;
display:block;
}
.tab-content>.tab-pane:not(.active) {
opacity: 0;
}
<div class="btn-group" role="group">
<button class="btn active" data-toggle="tab" href="#one">One</button>
<button class="btn" data-toggle="tab" href="#two">Two</button>
<button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
<div id="one" class="tab-pane fade in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
If you simply want to avoid having the fade affect, or need the tabs to appear more quickly remove the fade class.
// Original
<div class="tab-content">
<div id="one" class="tab-pane fade in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
// Updated
<div class="tab-content">
<div id="one" class="tab-pane in active">This is the One</div>
<div id="two" class="tab-pane fade">This is the Two</div>
<div id="three" class="tab-pane fade">This is the Three</div>
</div>
The fade class is only applied to the first pane, then when the button is clicked then Jquery removes the active class and fade class and applies it to the corresponding pane.
Trying to add an animation to the show / hide made with CSS. But not sure if possible, maybe I should do this with JS instead?
The paragraph is shown when hovering the div, but this does not have a smooth animation like I would want it to. Was primary looking for it to drop down or something.
However, the basic works. Would be glad if you took a look and decided if it should be made with JS instead. And incase how.
HTML
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Logo</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2 >Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
CSS
.hover-to-show {
display: none;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
display:block;
transition: all .2s ease-in-out;
}
As #Paran0a said, display property cannot be animated, you can animate height or opacity for instead to make the transition works.
.hover-to-show {
opacity: 0;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
opacity: 1;
transition: all .2s ease-in-out;
}
<div class="hover-to-show-link">
<a href="#">
<h2>Logo</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<h2 >Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
As mentioned before, Display cannot be animated.
I would use a combination of visibility and opacity to get the wanted result:
.hover-to-show
{
visibility:hidden;
opacity:0;
transition:opacity 0.5s linear;
}
.hover-to-show-link:hover .hover-to-show
{
display:block;
visibility:visible;
opacity:1;
}
For a more thorough explanation
Try this:
.hover-to-show {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.hover-to-show-link:hover .hover-to-show {
visibility: visible;
height: auto;
width: auto;
opacity: 1;
}
You can animate using purely CSS· with Keyframes, although I recommend using jQuery and slideUp / slideDown
.hover-to-show span {
opacity: 0;
position: absolute;
line-height: 20px;
transition: all .2s ease-in-out;
}
.hover-to-show {
position: relative;
display: block;
height: 0;
}
.hover-to-show-link:hover .hover-to-show span{
-webkit-animation: show 2s forwards; /* Safari 4+ */
-moz-animation: show 2s forwards; /* Fx 5+ */
-o-animation: show 2s forwards; /* Opera 12+ */
animation: show 2s forwards; /* IE 10+, Fx 29+ */
}
.hover-to-show-link:hover .hover-to-show {
-webkit-animation: grow 2s forwards; /* Safari 4+ */
-moz-animation: grow 2s forwards; /* Fx 5+ */
-o-animation: grow 2s forwards; /* Opera 12+ */
animation: grow 2s forwards; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
#-moz-keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
#-o-keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
#keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2>Logo</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2>Profilering</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2 >Profilering</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2>Profilering</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
You can use Animate.css.
Usage
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
<p class="hover-to-show animated infinite bounce">text</p>
If you don't care much about browsers compatibility, you can use CSS3 transition property. Can I use CSS3 Transitions? But display property can't be animated, you can use opacity instead.
.hover-to-show {
opacity: 0;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
opacity: 1;
transition: all .2s ease-in-out;
}
If you have to take care of old browsers, like IE, you can use jQuery instead.
$('.hover-to-show-link').mouseover(function() {
this.find('.hover-to-show').fadeIn(200);
}).mouseleave(function() {
this.find('.hover-to-show').fadeOut(200);
});
This is a great question! jQuery offers some great tools for this such as .slideDown() and .slideUp(), however this of course requires the use of jQuery.
If you would like to use CSS, I would suggest animating the max-height property; just make sure to keep the value it grows to greater than the content of your paragraphs.
.hover-to-show {
overflow: hidden;
max-height: 0px;
-o-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
max-height: 50px;
}
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Logo</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
I am coding a website which needs the full-screen fadein fadeout slider with content and next previous navigation . So I found this.
But the main problem is that I need this effect to fadein fadeout.
You can use bootstrap-carousel
http://getbootstrap.com/javascript/#carousel
For auto-gen help
http://www.bootply.com/64693
Here I'm giving one work-around for you with this fiddle http://jsfiddle.net/fj75wqwc/
The same is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<style>
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.carousel.carousel-fade .active.item {
opacity: 1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header text-center">
<h1>Bootstrap Carousel with fade effect</h1>
</div>
<div class="span6 offset3">
<div id="carousel_fade" class="carousel slide carousel-fade">
<div class="carousel-inner">
<div class="item active">
<!-- you can add any content here-->
<img src="http://placehold.it/600x400&text=Fade+effect-Page-1">
</div>
<div class="item ">
<!-- you can add any content here-->
<img src="http://placehold.it/600x400&text=Fade+effect-Page-2">
</div>
</div>
<a class="carousel-control left btn-control " href="#carousel_fade" data-slide="prev">‹</a>
<a class="carousel-control right btn-control" href="#carousel_fade" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('.carousel').carousel({
interval: 7000
})
})
</script>
</body>
</html>
I've been trying to understand why my carousel won't fade between transitions. It cycles as expected, but don't seem to apply the transition effect to make one panel fade in to the next.
Here's what I have so far:
/* Javascript */
function cycle() {
var active = $('.carousel .item.active');
var panels = $('.carousel .item');
var pos = panels.index(active);
var next = panels.eq((pos >= 5) ? 0 : ++pos);
next.addClass('active');
active.removeClass('active');
}
var interval = setInterval(cycle, 2000);
/* CSS */
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel .item {
-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
opacity: 0;
}
.carousel .item.active {
opacity: 1;
}
/* HTML */
<div id="id_landing_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item" data-nav-button="nav-home">
<img src="/media/carousel/home.png">
<div class="carousel-caption">
<h4><p>Welcome</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-residential">
<img src="/media/carousel/residential.jpg">
<div class="carousel-caption">
<h4><p>Residential</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-commercial">
<img src="/media/carousel/commercial.jpg">
<div class="carousel-caption">
<h4><p>Commercial</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-service">
<img src="/media/carousel/service.jpg">
<div class="carousel-caption">
<h4><p>Service</p></h4>
</div>
</div>
<div class="item active" data-nav-button="nav-blog">
<img src="/media/carousel/blog.jpg">
<div class="carousel-caption">
<h4><p>Blog</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-contact">
<img src="/media/carousel/contact.jpg">
<div class="carousel-caption">
<h4><p>Contact us</p></h4>
</div>
</div>
</div>
</div>
If anyone has any insight in to what I"m doing wrong, I'd very much appreciate it.
Damn. Nevermind. Solved it myself. Another style was setting the carousel's div element to display: none when it wasn't active.