Transitioning from jQuery to CSS3 for Animations

Many developers are starting to transition from Javascript/jQuery to CSS3 for animations on their web development projects. There are several methods to accomplish the same sort of effects between the two. In this article, you’ll learn how to make the same effects in CSS3 that you might already know how to do in jQuery.

Sliding Hidden Elements From The Left & Right

There are a variety of ways to make an element slide out from under something to the left and right. In this tutorial, we’re going to cover three different ways you can accomplish this using jQuery UI, jQuery animations, and CSS3.

You can view the demo of these methods here on JSFiddle.

Method 1: Jquery UI

This is a decent and quick method for achieving this effect, the only issue is the normal .stop() function does not work on .show and .hide, so there’s animation stacking. If you’re not worried about that go ahead and give this a go.

The jQuery:

jQuery(“#slidetrigger”).hover(
        function() {
                jQuery(“#slidecontent”).show(“slide”, {direction: “left”}, 400);
        }, function() {
                jQuery(“#slidecontent”).hide(‘slide’, {direction: ‘left’}, 400);
        }
);

The HTML:

Make sure to include the jQuery UI to enable these jQuery functions.The Google hosted on is linked below.

<!– Include Jquery UI for .show and .hide –>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js”></script>

<!– Jquery UI way –>
<div id=”slidetrigger”>Hover Me!</div>
<div id=”slidecontent”>Here’s the content!</div>

The CSS:

#slidetrigger{
        width: 100px;
        height: 100px;
        background: grey;
        float: left;
        line-height: 100px;
        text-align: center;
        color: white;
        margin-bottom: 20px;
}

#slidecontent{
        width: 200px;
        display: none;
        height: 100px;
        float: left;
        padding-left: 10px;
        background: #F6953D;
        line-height: 100px;
        text-align: center;
}

Method 2: Jquery .animation()

This method is the more robust and common way to create this animation in jQuery. You will notice that I’ve created a variable to handle the width so that this code automatically slides the whole elements width out. This is probably the most standard way you will see anyone do this with jQuery, and the animation function is very powerful. We will cover more of that later.

 

The jQuery:

var $content = jQuery(“#slidecontent2”);
var $contentwidth = jQuery(“#slidecontent2”).width();

jQuery(“#slidetrigger2”).hover(
        function() {
                $content.stop();
                $content.animate({left: -10});
        }, function() {
                $content.stop();
                $content.animate({left: -$contentwidth – 10});
        }
);

The HTML: 

<div class=”wrapper”>
        <div id=”slidetrigger2″>Hover Me!</div>
        <div id=”slidecontent2″>Here’s the content!</div>
</div>

The CSS:

.wrapper{
        overflow: hidden;
        clear: left;
}

#slidetrigger2{
        width: 100px;
        height: 100px;
        background: grey;
        float: left;
        line-height: 100px;
        text-align: center;
        color: white;
        clear: left;
        z-index: 5;
        position: relative;
        margin-bottom: 20px;
}

#slidecontent2{
        width: 200px;
        left: -310px;
        height: 100px;
        z-index: 1;
        float: left;
        padding-left: 10px;
        background: #F6953D;
        line-height: 100px;
        text-align: center;
        position: relative;
}

Method 3: CSS3 Only

The final method we’re going to cover is the CSS only method; this utilizes a basic transition on the “left” css property of the element and using a special css declaration “+” which gets an element of the parent to get both elements to work in the same div. I prefer this structure to having them inside of one another–another standrd method.

 The HTML: 

<div class=”wrapper”>
        <div id=”slidetrigger3″>Hover Me!</div>
        <div id=”slidecontent3″>Here’s the content!</div>
</div>

The CSS:

.wrapper{
        overflow: hidden;
        clear: left;
}

#slidetrigger3{
width: 100px;
height: 100px;
background: grey;
float: left;
line-height: 100px;
text-align: center;
color: white;
margin-bottom: 20px;
position: absolute;
z-index: 5 !important;
}

#slidetrigger3:hover + #slidecontent3{
transition: .75s;
left: 100px;
}

#slidecontent3{
width: 200px;
height: 100px;
float: left;
background: #F6953D;
line-height: 100px;
text-align: center;
left: -210px;
position: relative;
transition: .75s;
top: 0;
}

{{cta(‘0b2a6b0e-c725-42e9-b89b-3b2723ad7ba1’)}}