Javascript css style transition
3 posters
Page 1 of 1
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?
Last edited by Kami-sama on August 1st 2017, 1:18 pm; edited 1 time in total
Re: Javascript css style transition
Forum of the Forums Forumotion Rules | Tips & Tricks | FAQ | Did you forget your password? |
*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
Re: Javascript css style transition
Hey there is no issue with toggle transition! It is smooth.
The issue is with this part:
P.S. The elements are like this in the code:
So I cannot use show/hide or opacity
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
Re: Javascript css style transition
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:
2.Take a look at this fiddlle:http://jsfiddle.net/eD2zL/1/
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;
2.Take a look at this fiddlle:http://jsfiddle.net/eD2zL/1/
Guest- Guest
Re: Javascript css style transition
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.
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.
Re: Javascript css style transition
Hmmm. Well maybe that would be okey.
Yeah. With image it works. I only changed code a bit and transition is no longer needed:
SOLVED
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
Re: Javascript css style transition
Problem solved & topic archived.
|
Similar topics
» Rotating banner: transition issue
» javascript to split the online users so i can style each one in css
» Transition on show/hide JQ
» Transition from one personalized domain to another
» Background Hover Transition
» javascript to split the online users so i can style each one in css
» Transition on show/hide JQ
» Transition from one personalized domain to another
» Background Hover Transition
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum