I’ve been trying to create a rollover effect that changes the background of a div when hovering over it and also changes the background of another non-adjacent div at the same time using purely CSS. I haven’t been having much luck with this so I thought I would throw it out there for discussion. I was trying some positioning tricks, but wasn’t having much success and was really hoping that someone might have a more simple answer. If anyone has any thoughts I’d love to hear them. Thanks.
Do you find it’s good to make a variable and cache ‘$(this)’
Or is anything a preceding ‘$’ good to cache to save on loading speeds?
I suppose it’s good to try and get in the pattern of always writing good jQuery, even if it’s a small function or not…
Thanks for the advice :)
generally if your using a selector more than once inside the same scope stick it in a var, otherwise each time the selector is parsed its going to the dom.
There will be senario’s where jquery simply can be overkill for a small function, if jquery isn’t needed else where you have to stick in the library for that one small function. Big overhead for small gain.
There is a way to acheive the same affect using css alone depending on how the dom is arranged and using how hover propogates up the tree and sibling selectors. But is inefficient, jquery is the quickest cleanest way.
@Watson90 – The best analogy I heard for it is when Jeffrey Wey said to imagine the DOM (document object model) as a swimming pool. Every time you call a selector you’re jumping into the swimming pool to grab it and climbing back out.
If you know you’re going to need to use selectors more than once, you cache it, so instead of jumping in over and over, you just jump in the once and then you stick it in a photocopier. So you don’t get wet quite so often and it’s faster.
The reason for using a $ with the made up variables. Like $this = $(this) is because it indicates to people later that it’s a jquery object, rather than a string. So for example, if you did box1 = $(‘box-one’); someone might not realise it’s a jquery object later in use. But using $box1 exclaims to people what it’s for.
ehh its just best practice
@watson90 – It’s because $this = $(this) needs to be declared inside each function, as $(this) is different each time.
What you could do to consolidate that code is http://codepen.io/andyunleashed/pen/fpeiK
Edit: I assume you’re just playing with JQuery – cause you could do this same effect using the :hover pseudo class in CSS instead.
Ahh thanks @rainemaida and @andy_unleash
So variables that aren’t going to change can be declared locally (under document.ready function)
and variables like ‘$(this)’ always changes so they have to be declared inside the function.
I see now.
> I assume you’re just playing with JQuery – cause you could do this same effect using the :hover pseudo class in CSS instead.
Yes I am just playing around with it, I know that CSS would be a better choice :)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".