Implementing jQuery on SVG for the WordPress Header Logo

[bmoneruiux]

@chrisburton

Ok, now for the big question…why did jQuery work, and not the standard $?

And any idea why the SVG square receives the animation, but not the background color of the square when turning from grey to violet? There’s supposed to be a smooth change that’s no longer present.

NOTE: Working with SVG’s in a site is hard lol.

[chrisburton]

Ok, now for the big question…why did jQuery work, and not the standard $?

You have a noConflict script in your head which basically strips $ as a variable for jQuery so it does not interfere with other plugins (I think, not good with JS).

And any idea why the SVG square receives the animation, but not the background color of the square when turning from grey to violet? There’s supposed to be a smooth change that’s no longer present.

I’ll take a look.

[chrisburton]

Did you change anything around? I don’t see any code within jQuery that creates this effect. In your codepen, the background effect is done with CSS.

.logo-square, .logo-bg{
    transition: 0.4s;
}

Also, you know you can simply get rid of that jQuery script and do this whole animation thing with CSS, right?

Edit: I have to get going now. Hopefully someone can chime in.

[bmoneruiux]

Yes, sorry I was moving and condensing some things.

And yeah I knew I could do it with CSS, but it’d be with nested CSS properties and I wasn’t 100% on the full browser support for nested properties. I figured transitional animations were safe using jQuery to trigger them. Was I wrong?

[bmoneruiux]

Ok so I’ve gone and done it in SASS on a fork of my earlier pen. I’m gonna try this and see how it takes.

[chrisburton]

Nice. Looks like you’ve got it. Remember that you only need to support the browsers that are significant from your analytics.

[bmoneruiux]

@chrisburton

Yeah I ended up doing it as just CSS, however I’m having another issue, related, but separate issue.

I’ve outlined it in this post here…

[Author]

Posts