0

I may have a dumb question but I just can't figure it out:

I've got 3 columns, and I want to change the background of their parent when I hover over each of them with different background.

I am using this code:

$('#first-col').hover(function(){
   $(this).parent().parent().toggleClass('first-pic');
})

$('#second-col').hover(function(){
   $(this).parent().parent().toggleClass('second-pic');
})

$('#third-col').hover(function(){
   $(this).parent().parent().toggleClass('third-pic');
})

And it works great! Now the question part: Is there any way to make it change smoother?

I tried applying 

transition: background 0.5s linear

to the parent but it doesn't do anything. Is there any other way of doing something about it?

mustaccio
  • 18,234
  • 16
  • 48
  • 57
vuchke
  • 1
  • Should works, check it http://jsfiddle.net/6cpds7ga/ – DrKey Mar 12 '17 at 14:49
  • Possible duplicate of [ToggleClass animate jQuery?](http://stackoverflow.com/questions/11179238/toggleclass-animate-jquery) – Dariush Jafari Mar 12 '17 at 15:06
  • @DrKey it is working when i apply it on the element i'm hovering. But not when i apply it to the parent which is the one changing background... – vuchke Mar 12 '17 at 15:15
  • @vuchke should works anyway http://jsfiddle.net/6cpds7ga/1/ – DrKey Mar 12 '17 at 17:03
  • It might help to pre-load the background images and transition the `backgound-image` property instead. You could also try transitioning the transparency of the background. Also, shouldn't you remove the other classes when you hover over a new child? – Marc Rohloff Mar 13 '17 at 01:35

0 Answers0