Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Rebecca Jensen
Rebecca Jensen
11,580 Points

Can I use jQuery to trigger CSS transformations?

I have a mobile menu icon made up of three span tags that I've used CSS transformations to animate on hover (it animates into an 'x'). What I'd really like is for this to happen On Click.

Can I use jQuery to trigger these CSS transformations?

Here's my HTML:

<li class="menu-burger">
        <span class="line-1"></span>
        <span class="line-2"></span>
        <span class="line-3"></span>
      </li>

and my CSS:

.menu-burger span {
    background-color: #ffffff;
    padding: 1px 12px;
    margin: 6px;
    display: list-item;
}

.line-1 {
    transition: transform .5s;
    transform-origin: 100% 0%;
}

.menu-burger:hover .line-1 {
    transform: rotate(-45deg);
}

.line-3 {
    transition: transform .5s;
    transform-origin: 100% 100%;
}

.menu-burger:hover .line-3 {
    transform: rotate(45deg);
}

.line-2 {
    transition: opacity .5s;
}

.menu-burger:hover .line-2 {
    opacity: 0;
}

2 Answers

Brandon VanCamp
.a{fill-rule:evenodd;}techdegree seal-36
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 Points

Hello Rebecca Jensen,

You could easily do something like this

jQuery

<script>
// Call jQuery
$(document).ready(function(){
    $(".menu-burger").on({click: function(){
          // toggle each child on user click
        $("span:nth-child(1)").toggleClass(" active-1 ");
        $("span:nth-child(2)").toggleClass(" active-2 ");
        $("span:nth-child(3)").toggleClass(" active-3 ");
     }
});
});

</script>

css

<style>
.menu-burger span {
    background-color: #000;
    padding: 1px 12px;
    margin: 6px;
    display: list-item;
}

.line-1 {
    transition: transform .5s;
    transform-origin: 100% 0%;
}

.active-1{
    transform: rotate(-45deg);
}

.line-3 {
    transition: transform .5s;
    transform-origin: 100% 100%;
}

.active-3{
    transform: rotate(45deg);
}

.line-2 {
    transition: opacity .5s;
}

.active-2 {
    opacity: 0;
}

</style>

HTML

<li class="menu-burger" id="test">
        <span class="line-1">_</span>
        <span class="line-2">_</span>
        <span class="line-3">_</span>
      </li>

Let me know if this helps!

Rebecca Jensen
Rebecca Jensen
11,580 Points

Yes! Excellent. Creating a separate class to assign/unassign was just what I needed. Thanks!

Brandon VanCamp
.a{fill-rule:evenodd;}techdegree seal-36
Brandon VanCamp
Front End Web Development Techdegree Graduate 30,954 Points

Not a problem, glad i could help!

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points

jquery is a js library so anything you can do with js you can do with jquery. you can attach a click event listener on the menu icon and change the styles. here is a list of animatable properties, which includes transform:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties