The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Javascript css style transition

View previous topic View next topic Go down

Solved Javascript css style transition

Post by Kami-sama on 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
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Javascript css style transition

Post by Luffy on July 31st 2017, 11:49 pm

Hello @Kami-sama,

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





avatar
Luffy
Manager
Manager

Male Posts : 4671
Reputation : 470
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Javascript css style transition

Post by Kami-sama on 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 :/
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Javascript css style transition

Post by Justice™ on 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
Justice™
Forumember

Posts : 489
Reputation : 115
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Javascript css style transition

Post by Kami-sama on 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.
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Javascript css style transition

Post by Justice™ on August 1st 2017, 12:31 pm

You'll need to use img, not div.
avatar
Justice™
Forumember

Posts : 489
Reputation : 115
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Javascript css style transition

Post by Kami-sama on 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
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Javascript css style transition

Post by APE on August 1st 2017, 3:53 pm

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



avatar
APE
Manager
Manager

Male Posts : 10439
Reputation : 963
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

View previous topic View next topic Back to top


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