The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Javascript css style transition

3 posters

Go down

Solved Javascript css style transition

Post by Kami-sama July 31st 2017, 11:08 pm

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?


Last edited by Kami-sama on August 1st 2017, 1:18 pm; edited 1 time in total
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Javascript css style transition

Post by TheCrow July 31st 2017, 11:49 pm

Hello @Kami-sama,

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Javascript css style transition

Post by Kami-sama August 1st 2017, 12:03 am

Hey Wink 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 :/
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Javascript css style transition

Post by Guest August 1st 2017, 8:09 am

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/
avatar
Guest
Guest


Back to top Go down

Solved Re: Javascript css style transition

Post by Kami-sama August 1st 2017, 12:15 pm

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.
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Javascript css style transition

Post by Guest August 1st 2017, 12:31 pm

You'll need to use img, not div.
avatar
Guest
Guest


Back to top Go down

Solved Re: Javascript css style transition

Post by Kami-sama August 1st 2017, 1:18 pm

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
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Javascript css style transition

Post by Ape August 1st 2017, 3:53 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


Javascript css style transition Left1212Javascript css style transition Center11Javascript css style transition Right112
Javascript css style transition Ape_b110
Javascript css style transition Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum