We Keep Coding

How to change smoothly my div content

I have a pagination that i want to change the content of container by click on it.
it works, but i want that it happen smoothly.
<div id='container>
<div id='0' class='box'></div>
<div id='1' class='box'></div>
<div id='2' class='box'></div>
</div>
style :
#container{'
position:relative
}
.box{
position: absolute;
display: none;
}
.box:first-child{
display: inline-block;
}
by click on my pagination buttons :
$(function () {
var obj = $('#pagination').twbsPagination({
totalPages: 3,
visiblePages: 2,
prev:'Prev',
next:'Next',
onPageClick: function (event, page) {
console.info(page);
page=page-1;
$(".box").hide(function () {
$("#"+page).show();
});
}
});
how can i do this smoothly?

You have 2 options
In Jquery Way:-
Use fadeIn fadeOut in place of show hide
$(".box").fadeOut("slow",function () {
$("#"+page).fadeIn('slow');
});
In CSS Way:-
Use transition to animate. but in this case you only can play smoothly with opacity and visibility and not display
.box{
position: absolute;
opacity: 0;
visibility:hidden;
-webkit-transition: all 2s ease 0s;
-moz-transition: all 2s ease 0s;
-o-transition: all 2s ease 0s;
-ms-transition: all 2s ease 0s;*/
transition: all 2s ease 0s;
}

You can use transitions with opacity rather than hiding an showing the elements.
.box {
position: absolute;
display: block; // not required but do not keep it as display: none
opacity: 0; // make the div invisible!
transition: opacity 1s linear; // tell the browser how and what to transition
-webkit-transition: opacity 1s linear; // webkit support
-moz-transition: opacity 1s linear; // firefox support
}
.box.active {
opacity: 1; // only applies when a box has the class .box and .active
}
Instead of calling .show() to show the element you can add and remove the active class on each div.

Javascript native implementation div display/hide with animate

I am looking for a native JS solution to toggle div display using display:'none' and display:'block' properties. I have the first part done. I only need the part to do a simple fadeIn and fadeOut animation.
I need to use native JS and display:block,none.
var e = document.getElementById('calendarPickerContainer');
if (e.className == 'visible') {
e.className = 'hidden';
} else {
e.className = 'visible';
}
need to adapt to this css
.visible{
display:block;
}
.hidden {
display:none;
}

If you wanna use a pure JavaScript fadeIn and fadeOut, try this:
transition: opacity 1s linear;
This is a pure CSS method.
#cont {-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;}
#cont.hidden {opacity: 0;}
<button onclick="cont.classList.add('hidden'); setTimeout('cont.style.display=\'none\'', 1000);">Click</button>
<div id="cont">
Hello
</div>
Working Snippet (includes toggle):
#cont {-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; opacity: 1;}
#cont.hidden {opacity: 0; -webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;}
<button onclick="if (cont.style.display != 'none') { cont.classList.add('hidden'); setTimeout('cont.style.display=\'none\'', 1000); } else {cont.style.display='block'; setTimeout('cont.classList.remove(\'hidden\')', 10);}">Click</button>
<div id="cont">
Hello
</div>

You can achieve this easily with CSS3
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}

Native JS fade function:
var s = document.getElementById('calendarPickerContainer').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

You can simplfy this with classList
document.querySelector('.toggle').addEventListener('click',function(e) {
e.target.classList.toggle('hide');
})
Css:
div {
transition:all 0.3s ease-in;
}
.hide {
opacity: 0;
}
We're using opacity since display cannot be animated.
Example

Why is it that when using JQuery, when I hover, there's no smooth animation?

I have the following in my script.js file:
$(document).ready(function(){
$( '.elementoBarra1').hover(
function(){
$(this).addClass('lineaBarraActive');
},
function(){
$(this).removeClass('lineaBarraActive');
}
);
});
There is a change in color (based on the instructions I'm giving in the stylesheet), but there's no animation (or transition). It just passes binarily to the other color, there's no animation where it passes through all the colors in the middle in a short-lapse of time.
Why is this?
EDIT: Just tried fadeIn() and fadeOut() and they are working properly, they have a smooth animation. Why are addClass() and removeClass() not working properly?

addClass and removeClass api of Jquery doesn't provide any animation. They are just meant for adding or removing class.
If you want to achieve animation, then you must add transition in the class you are adding.
There's no need for jQuery also. Just use :hover pseudo selector to achieve it
.elementoBarra1 {
background-color: black;
width: 100px;
height: 200px;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1000ms linear;
}
.elementoBarra1:hover {
background-color: red;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1000ms linear;
}
DEMO

You can try j Query Animate.
$( "selector" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
You can set css style as mentioned above so that you can get smooth animation.
eg program: Fiddle Url

Add transition while changing img src with javascript

I have an img tag that I want to change the src when hover and it all works but i would like to add some transition so it doesn't look so rough but since it's an img src i cant target it with css.
http://jsfiddle.net/Ne5zw/1/
html
<img id="bg" src="img/img1.jpg">
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">
js
function imgChange(im){
document.getElementById('bg').src=(im);
}

You want a crossfade. Basically you need to position both images on top of each other, and set one's opacity to 0 so that it will be hidden:
<div id="container">
<img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">
<img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
</div>
CSS:
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
With a transition set for opacity on the images, all we need to do is trigger it with this script:
$(function(){
debugger;
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});
http://jsfiddle.net/Ne5zw/12/

Here is a pure css solution using css transition. You can use a div as the container and set the background-image on hover.
.image-container {
background: url(http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image) center center no-repeat;
background-size: contain;
width: 150px;
height: 150px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-container:hover {
background-image: url("http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image");
}
<div class="image-container"></div>

Just in case someone is curious how to actually create a transition-like effect when you are actually changing the source attribute of an image, this was the solution I came up with.
Javascript:
var bool = false;
setInterval(() => {
bool = !bool;
let imgSrc = bool ? 'hero-bg2.jpg' : 'hero-bg.jpg'; // Toggle image
$('.parallax-slider').addClass('transitioning-src'); // Add class to begin transition
setTimeout(() => {
$('.parallax-slider').attr('src', `https://website.com/images/${imgSrc}`).removeClass('transitioning-src');
}, 400); // Ensure timeout matches transition time, remove transition class
}, 6000);
CSS:
.parallax-slider {
transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
opacity: 1;
}
.transitioning-src {
transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
opacity: 0;
}
This will give the illusion of 'fading to black and back' between images - even if you're using something like parallax.js where you have a data-attribute driven component that renders out into a dynamic image. Hope it helps someone.

Fixed Mister Epic solution's images in this jsfiddle.
HTML
<div id="container">
<img class="hidden image1" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image">
<img class="image2" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image" />
</div>
<div id="hoverMe">hover me</div>
CSS
div#hoverMe {
background-color:yellow;
width:50px;
height:50px;
position:fixed;
top:300px;
}
div#container{
position:relative;
height:200px;
}
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
JS
$(function(){
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});

Jquery toggleClass not working applying to element

I'm trying to apply a toggleClass but it isn't applying the new class.
What's going on?
Click
<div id="main" class="invisible">
Hi there
</div>
.invisible{
opacity: 0;
}
.visible{
opacity: 1;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#main").toggleClass("visible");
});
});
Here's the jsFiddle
http://jsfiddle.net/Gilgamesh415/grxQX/17/

If you mean your fiddle, you forgot to add jQuery library, in the top left of the jsfiddle window.
Check here
If you mean your website check you have the jQuery library loaded by adding <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> inside you head tags.

try this:
<script type="text/javascript">
$(document).ready(function() {
$("#s").click(function(){
$("#main").toggleClass("n");
});
});
</script>
<div id="main" class="m"></div>
<button id="s">click</button>
<style type="text/css">
.m
{ opacity:0;}
.n
{
width:100px;
height:100px;
border:2px solid yellow;
background:green;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
opacity: 1;
}
</style>
demo here:http://jsfiddle.net/65Hg4/1/

$("#cf_onclick").click(function(e) {
e.preventDefault();
$("#main").toggleClass("invisible").toggleClass("visible");
});
http://jsfiddle.net/grxQX/18/

And try using a self invoking anonymous function:
(function(){
.... //your code
}(jQuery));
instead of
$(document).ready(function(){...});
Since best practice is to load the scripts at the bottom of your page, just before the closing </body> tag, you don't need to check if the document has been loaded ($(document).ready()), it already has.
Like this http://jsfiddle.net/micka/94pNW/