Javascript css style transition

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : ( link is hidden, you must reply to see )

Description of problem

Hello!

So I am using code like this:

Code:

 $(".m1").click(function(){
        $(".m1cont").fadeToggle("slow", function() {
           if ($(".m1cont").is(":visible")) {
              $('.ANcontent').css({"background-image": "none", "transition": "1s", "transform" : "all"});
           };
           if ($(".m1cont").is(":hidden")) {
              $('.ANcontent').css({"background-image": "url('https://i.solidfiles.com/k3x8BVeKK3vjy.png')", "transition": "1s", "transform" : "all"});
           };
        });
        $(".m2cont, .m3cont, .m4cont, .m5cont, .m6cont, .m7cont, .m8cont").css("display", "none");
    });

Finally got it to work as intended, BUT the style transition (background image change) is, well, not existant. The image changes according to IF condition, but transition tag does not work. Any ideas how to make it more smooth?

Hello @Kami-sama,

Have you tried changing "slow" to "1000"?

Hey there is no issue with toggle transition! It is smooth.
The issue is with this part:

Code:

if ($(".m1cont").is(":visible")) {
              $('.ANcontent').css({"background-image": "none", "transition": "1s", "transform" : "all"});
          };
          if ($(".m1cont").is(":hidden")) {
              $('.ANcontent').css({"background-image": "url('https://i.solidfiles.com/k3x8BVeKK3vjy.png')", "transition": "1s", "transform" : "all"});
          };

P.S. The elements are like this in the code:

Code:

<div class="ANcontent'">....<div class="m1cont">...</div>....</div>

So I cannot use show/hide or opacity

Hi,

The property background-image cannot be animated by default. There are a few ways of doing what you need:
1.Add this rules to the img tag:

Code:

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

The problem is they'll not work in Internet Explorer and Firefox.

2.Take a look at this fiddlle:http://jsfiddle.net/eD2zL/1/

Hm, I have tried adding this in both element style and java code, but did not see any changes.
In your example you have IMG elements. Maybe that's the main difference? In my case there are no IMG elements. Only Div element background is changed.

You'll need to use img, not div.

Hmmm. Well maybe that would be okey.
Yeah. With image it works. I only changed code a bit and transition is no longer needed:

Code:

, function() {
           if ($(".m1cont").is(":visible")) {
              $('.ANcontentimg').fadeOut();
           };
           if ($(".m1cont").is(":hidden")) {
              $('.ANcontentimg').fadeIn();
           };
        });

SOLVED