How do i add transitions to my current JavaScript code?

Question

I am currently working on a website project, and i have put together this code (JavaScript) for a slider using an online YouTube tutorial.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">

        <script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            var imagecount = 1;
            var total = 2;

            function slide (x){
                var Image = document.getElementById('img');
                imagecount = imagecount + x;
                if(imagecount > total){imagecount = 1;}
                if(imagecount < 1){imagecount = total;}
                Image.src = "images/img"+ imagecount +".png";
            }

            window.setInterval(function slideA () {
                var Image = document.getElementById('img');
                imagecount = imagecount + 1;
                if(imagecount > total){ imagecount = 1;}
                if(imagecount < 1){ imagecount = total;}
                Image.src = "images/img"+ imagecount +".png";
            },5000);

        </script>
    </head>
    <title></title>
        <body onload="slideA()" >

        <div id="container">
            <div id="header">
             <div id="logo">
                <img src="big states.png" alt="Logo">
            </div>
            </div>

            <div id="nav">
                <ul> 
                    <li><a class="active" href="#home">HOME</a></li>
                    <li><a href="#menu">MENU</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#gallery">GALLERY</a></li>
                    <li><a href="#reviews">REVIEWS</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                 </ul>
            </div>
        </div>

        <div id="bgimg">
            <img src="sliderbackground.jpg">
        </div>    
        <div class="slidercontainer">
            <img src="images/img1.png" id="img">   
                <div id="arrow-right"><img href="#" onclick="slide(1)"     src="arrow-right.png" class="right" onmouseover="this.src='right-hover.png';"     onmouseout="this.src='arrow-right.png';" />  </div>
                <div id="arrow-left"><img href="#" onclick="slide(-1)"     src="arrow-left.png" class="left" onmouseover="this.src='left-hover.png';"     onmouseout="this.src='arrow-left.png';" />  </div>

        </div>

    </body>
</html>

However the tutorial did not show how to add transitions into the slider and that is what i need help on.

There are two transition effects i am looking for which are:

OnLoad the image should fade in.
The image should swipe left when changing.

What is the point of downvoting, if you are not even going to put in the comments why? The OP is new to SO, why not try helping! TROLLS — Adam Buchanan Smith, Mar 10 '16 at 22:49

nasso · Answer 1 · 2016-03-12T22:13:00.220

Take a look at css transitions and/or animations.

You could just update the css in your Javascript code like this:

CSS

#img {
    /* Initialize with 0% opacity (invisible) */
    opacity: 0%;

    /* Use prefix for cross browser compatibility */
    transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
}

Javascript

Image.onload = function(){
    this.style.opacity = "100%";
}

You can use the same technique for swiping with the left property with a relative position in CSS.

Adding it to the code

var imagecount = 1;
var total = 2;

function slide (x){
    var Image = document.getElementById('img');
    imagecount = imagecount + x;
    if(imagecount > total){imagecount = 1;}
    if(imagecount < 1){imagecount = total;}
    Image.src = "images/img"+ imagecount +".png";

    Image.style.opacity = "0%"; // Reset the opacity to 0% when reloading the image !
}

window.setInterval(function slideA () {
    var Image = document.getElementById('img');
    imagecount = imagecount + 1;
    if(imagecount > total){ imagecount = 1;}
    if(imagecount < 1){ imagecount = total;}
    Image.src = "images/img"+ imagecount +".png";

    Image.style.opacity = "0%"; // Reset the opacity to 0% when reloading the image !
},5000);

Then simply add it in the html node:

<img src="images/img1.png" id="img" onload="this.style.opacity = '100%'">

Thank you for you're response, after adding the CSS and JavaScript code there were still no changes made when previewing the slider. Regarding the JavaScript will it be placed within the current script tags which are in the code ? — CodingJunkie, Mar 10 '16 at 23:13
@CodingJunkie This surely a problem because your browser cached the image so the `onload` function isn't called. Look at this technique for solving the problem http://stackoverflow.com/a/5933319/4760242 — nasso, Mar 10 '16 at 23:19
thanks for that, however still a bit lost with regard to changing the provided code in the example given to my own code. — CodingJunkie, Mar 12 '16 at 20:11

How do i add transitions to my current JavaScript code?

1 Answers1