Response title
This is preview!
Move this topic
jQuery animate doesn't work on second slide
in Using jQuery
•
8 years ago
I'm building some fancy slider with different effects.
I've created the first slide and the effects are working perfectly, but when I click on the next button, the effects doesn't work on the second slider.
EDIT:
Here's the fiddle:
http://jsfiddle.net/emco83/az135syn/
EDIT2:
Something to add: If I make separate the two divs for slides on a separate pages, after clicking on a next button, the animation for the second slide that's displayed on a second page works great, but the issue stays if its a slider on one page.
I just want to animate every elements on a different slides on one page.
I've created the first slide and the effects are working perfectly, but when I click on the next button, the effects doesn't work on the second slider.
EDIT:
Here's the fiddle:
http://jsfiddle.net/emco83/az135syn/
EDIT2:
Something to add: If I make separate the two divs for slides on a separate pages, after clicking on a next button, the animation for the second slide that's displayed on a second page works great, but the issue stays if its a slider on one page.
I just want to animate every elements on a different slides on one page.
1
Replies(23)
Re: jQuery effects on sliders
8 years ago
I don't get it. Why does jQuery effects breaks on the second slider?
Any idea, example or advice will be very useful.
Any idea, example or advice will be very useful.
Leave a comment on emco83's reply
Re: jQuery effects on sliders
8 years ago
A demo that people could try would be helpful.
Provide a link to your site, or create a jsFiddle.
You won't get many people to stare at some posted CSS hoping to
find what is wrong.
Leave a comment on watusiware's reply
Re: jQuery effects on sliders
8 years ago
Thank you for your answer.
Here's the fiddle:
http://jsfiddle.net/emco83/v1fh414d/
You'll see first the animated elements and on the bottom there's a red button link that goes to the second slide. I'm trying to animate the logo like it's from the first slide.
Here's the fiddle:
http://jsfiddle.net/emco83/v1fh414d/
You'll see first the animated elements and on the bottom there's a red button link that goes to the second slide. I'm trying to animate the logo like it's from the first slide.
Leave a comment on emco83's reply
Re: jQuery effects on sliders
8 years ago
You use a selector for .logo2
in your JS code, but you don't have any element with that CSS
class.
FWIW, your selectors are way over-specified. And I'd
lighten-up on the IDs.
Leave a comment on watusiware's reply
Re: jQuery effects on sliders
8 years ago
I've cleaned up a bit the code and I hope it's more
understandable now:
http://jsfiddle.net/emco83/az135syn/
When I click on "Go to the next level" how can I set animation on the logo on the second slider?
http://jsfiddle.net/emco83/az135syn/
When I click on "Go to the next level" how can I set animation on the logo on the second slider?
Leave a comment on emco83's reply
Re: jQuery effects on sliders
8 years ago
Something to add: If I make separate the two divs for slides on a
separate pages, after clicking on a next button, the animation for the
second slide that's displayed on a second page works great, but the
issue stays if its a slider on one page.
I just want to animate every elements on a different slides on one page.
I've seen some jQuery slide plugins with this kind of functionality. Here's an example:
http://www.jqueryrain.com/?TSlJT1UI
Please anyone help me to fix this.
I just want to animate every elements on a different slides on one page.
I've seen some jQuery slide plugins with this kind of functionality. Here's an example:
http://www.jqueryrain.com/?TSlJT1UI
Please anyone help me to fix this.
Leave a comment on emco83's reply
Re: jQuery animate doesn't work on second slide
8 years ago
Finally I've figured out!
Instead of .css(), I'm using .animate() on every click and it work a charm. So, I'm not using css3, but jQuery with .animate().
Damn, it's very easy when you figure out. :)
Instead of .css(), I'm using .animate() on every click and it work a charm. So, I'm not using css3, but jQuery with .animate().
Damn, it's very easy when you figure out. :)
Leave a comment on emco83's reply
Re: jQuery animate doesn't work on second slide
8 years ago
If it work for you, great! I avoid .animate()
, though, because it uses JS to do animations using old/slow code.
CSS3 can provide much smoother animation. It will be especially
noticeable on mobile devices.
There are JS animation libraries that have great performance,
though. But jQuery is not one of those!
The best way to control CSS3 animation is to simply add/remove
CSS classes to elements with your JS. The rest of it you do in your
CSS stylesheet. I think where you got in trouble was changing the
CSS directly with .css() and then not
understanding the CSS cascade. .css() applies CSS directly to the
node, as if you had written it inline, e.g. style="...".
There are MANY resources on the web where you can learn CSS3
animation. This forum really isn't a good place for it.
jQuery doesn't do much of anything with CSS3 animation,
because it doesn't have to. (You can get a callback, though,
when a CSS3 animation completes, which can be useful!) You specify
the animation in your stylesheet.
jQuery provides the .animate() function to
work with older browsers that don't have CSS3. It uses timer
callbacks to apply changes to CSS at intervals. It cannot provide the
same kind of smooth animation that CSS3 provides. If jQuery were
being written as a new product today, I think it would likely omit
.animate(). It
is rapidly becoming a historical artifact.
Unfortunately, old habits die hard, and many of the popular jQuery
learnings resources pre-date CSS3.
Thank you very much for your useful answer.
I've choose to use animate(), because with .css() I've didn't managed to achieve the desired task.
You see, first I've tried with transitions, but the tricky part is what happen when clicking on the next button?
It shows the next slide with help of jQuery by using .click() and inside I set .show() on to the next slide (#slide2 in this case) and .hide() the other divs. That works great.
After that in the same .click() function I've tried with .css() and property lets say top:50px, so it goes like $(the_div).css("top","50px");. The same div has previously property top:-300px;(it's hidden) and transition:all 0.5s ease-in-out 1s; with pure CSS. So, the idea here is: after clicking on the next button it's supposed to act these effects, but unfortunately it doesn't work with .css() and the animation doesn't work.
Instead of .css(), I've tried with .animate() and its working.
I'm very curious why it didn't worked with .css(). It has something related with document loaded object, I guess.
I totally agree with your advice about using css3, I'm not a fan of .animate(), but I've didn't received an answer or different approach here how should be created.
By the way I never use inline styling.
I'm looking forward to see some example from you of two slides that has different divs with different elements, a next button from the first slide and animations on the two slides.
I've choose to use animate(), because with .css() I've didn't managed to achieve the desired task.
You see, first I've tried with transitions, but the tricky part is what happen when clicking on the next button?
It shows the next slide with help of jQuery by using .click() and inside I set .show() on to the next slide (#slide2 in this case) and .hide() the other divs. That works great.
After that in the same .click() function I've tried with .css() and property lets say top:50px, so it goes like $(the_div).css("top","50px");. The same div has previously property top:-300px;(it's hidden) and transition:all 0.5s ease-in-out 1s; with pure CSS. So, the idea here is: after clicking on the next button it's supposed to act these effects, but unfortunately it doesn't work with .css() and the animation doesn't work.
Instead of .css(), I've tried with .animate() and its working.
I'm very curious why it didn't worked with .css(). It has something related with document loaded object, I guess.
I totally agree with your advice about using css3, I'm not a fan of .animate(), but I've didn't received an answer or different approach here how should be created.
By the way I never use inline styling.
I'm looking forward to see some example from you of two slides that has different divs with different elements, a next button from the first slide and animations on the two slides.
Leave a comment on watusiware's reply
Re: jQuery animate doesn't work on second slide
8 years ago
By the way I never use inline styling
That's
what you are doing when you use jQuery .
css()
!
BTW, I think you are
mis-labeling some simple animation here as "slides".
That has quite a different implication - usually a
"slider" is some slide-show type plugin. That's
really not what you are trying to accomplish here, and so I
think your description is misleading and not attracting the
right viewers.
I'm looking forward to see some example from you of two slides that has different divs with different elements, a next button from the first slide and animations on the two slides.
Search the web. This is not the
place to instruct about CSS3 animation. It really has nothing to
do with jQuery! There are LOTS of sites that teach about CSS3 animation/transitions.
You can TRIGGER an
animation with jQuery very simply, by just using
.addClass()
to add a CSS class.
That's the extent to which jQuery gets involved! (That,
and getting a callback when the animation has completed.)
Oh sorry, I've thought you meant inline with pure css, not jQuery css.
I understand. That makes sense why isn't working like that.
I understand. That makes sense why isn't working like that.
Leave a comment on watusiware's reply
Re: jQuery animate doesn't work on second slide
8 years ago
I've tried with adding class, but the animation still doesnt work.The best way to control CSS3 animation is to simply add/remove CSS classes to elements with your JS. The rest of it you do in your CSS stylesheet. I think where you got in trouble was changing the CSS directly with .css() and then not understanding the CSS cascade.
This is what I've tried:
In the .click() function I've added this line $('.logo2').addClass('animated'); and after that in css
I've added this: .logo2 { transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1) 1s; top:-300px; position:absolute;} and in .logo2.animated {top:0px;}
It doesn't work.
I've tried with .on() function too. It's the same....the animation doesn't work.
Leave a comment on emco83's reply
Re: jQuery animate doesn't work on second slide
8 years ago
Take jQuery completely out of the equation.
- write your CSS
- test it using your browser's inspection tools. You can
easily add the class manually in the inspection tools.
There is some learning-curve to CSS3 animation. There are
many sites to help. They will show how to trigger an animation by
just adding a CSS class, how to deal with display:none (not quite so
simple), how to write your CSS rules to take advantage of the cascade
rules, etc. etc. etc.
jQuery animation removes that learning curve, if you happen to
already know jQuery animation. If not, you are learning something
obsolete (IMO). But it can be really easy to apply for simple cases.
You won't be able to take advantage of the smoothness of CSS3
animations if you use them.
There are SO MANY good sites about CSS3 animation and
transitions, and this is not the place for it. I get slapped
(gently) by the mods when I diverge into solving CSS3 problems here.
;) so, I will just suggest that it's a really good thing to
learn, and a great adjunct to jQuery.
Leave a comment on watusiware's reply
Re: jQuery animate doesn't work on second slide
8 years ago
I have worked before pretty much with CSS3 and I know how the animations
works, but as far as I know I cannot just create a click function with
CSS, also this project has 7 slides that acts with different effects and
for these slides I need jQuery.
Something to mention. All my other projects that has CSS3 animations are triggered on page load or, not sliders on one page. That's the real issue here.
Something to mention. All my other projects that has CSS3 animations are triggered on page load or, not sliders on one page. That's the real issue here.
Leave a comment on emco83's reply
Re: jQuery animate doesn't work on second slide
8 years ago
You create a click function with jQuery. The click function adds a CSS
class using .addClass()
. End of jQuery involvement.
If what you have works for you, I am happy for you! Problem solved!
I've already tried like that. The animation doesn't work.
I don't know how to explain any more...
I'll write once again: if it's a first page loading the animation works great, but not when opening a second slider. OK, never mind, I guess I have to give up.
I know very well CSS3 and this issue is not related with that.
Maybe you should try to create a slides and with these features, so you can test it.
Basically when I add a new class on clicking the button the class is added but the animation doesn't fire.
If I toggle the created top:0 with the animated class with firebug, the animation works, but only like that.
I don't know how to explain any more...
I'll write once again: if it's a first page loading the animation works great, but not when opening a second slider. OK, never mind, I guess I have to give up.
I know very well CSS3 and this issue is not related with that.
Maybe you should try to create a slides and with these features, so you can test it.
Basically when I add a new class on clicking the button the class is added but the animation doesn't fire.
If I toggle the created top:0 with the animated class with firebug, the animation works, but only like that.
Leave a comment on watusiware's reply
Re: jQuery animate doesn't work on second slide
8 years ago
If you update your fiddle, perhaps somebody can help with it.
Without the updated fiddle, it is just words. Unfortunately,
"just words" don't make computers do anything. ;)
If you update your Fiddle, we can see what you are trying to do,
and what works/doesn't work.
I think you are confusing people referring to "slides"
here. You just have a sequence of animation effects that you want to
apply, right? Sorry, I just don't get the "replacing this
slide with that" line of thinking here at all.
You have one sequence of animation effects that you want when the
page is first shown. You have another that you want to apply once the
user presses a button.
A "slider" is some widget that shows some images one
after the other, or the user can "next",
"previous". That's not what you are trying to do here at
all, is it?
(Or, it is a "slide-switch" used as an on/off input
control. The confusion is unfortunate - and often comes up here... In
any case, it's not that!)
Leave a comment on watusiware's reply
Leave a comment on emco83's reply
Re: jQuery animate doesn't work on second slide
8 years ago
I would suggest providing two fiddles:
- Your current, working, version that uses jQuery .animate(). This will
show us just what you are trying to do. No words needed!
- Your attempt with CSS3, using .addClass() rather than
fiddling with .css().
Let's see if somebody can fix the latter to act like the
former. (But with smooth CSS3 animation.)
Leave a comment on watusiware's reply
Re: jQuery animate doesn't work on second slide
8 years ago
I think we crossed posts.
Can you add a second fiddle now, your working version with
.animate(), so that we can see exactly what you are trying to do?
It will be a good illustration of the difference between jQuery
animation and CSS3 animation!
I will look at this later (this evening). In the mean-time,
perhaps somebody else will as well.
Leave a comment on watusiware's reply
Re: jQuery animate doesn't work on second slide
8 years ago
Here's the fiddle:
http://jsfiddle.net/emco83/Lz9zj9dz/4/
And here's the working example with .animate()
http://jsfiddle.net/emco83/2gw899vm/
You'll see on the first example if you click on the next button the logo just stays with no animation.
http://jsfiddle.net/emco83/Lz9zj9dz/4/
And here's the working example with .animate()
http://jsfiddle.net/emco83/2gw899vm/
You'll see on the first example if you click on the next button the logo just stays with no animation.
Leave a comment on emco83's reply
Re: jQuery animate doesn't work on second slide
8 years ago
I have a question...
Looking at your working example, I see you have duplicated
Logo.png in two different <img> tags. Why?
I think the two of us are looking at the same problem, and seeing
two different things.
You see two sets of "slides".
I see two container elements (along with their background and
content) and one logo, which is an <img>. (It could
just as well be some container element, though...)
The Next button is rather irrelevant, other than that pushing it
triggers the second animation. It just happens to be inside one of
the two containers.
So...
- when the page loads, you want to show the first container
contents, animating the logo into/over it.
- when user presses the NEXT button, you want to hide the first
container, show the second. (With perhaps some transition effect). And
then animate the logo into/over it just like for the first container.
Right?
Leave a comment on watusiware's reply
Re: jQuery animate doesn't work on second slide
8 years ago
I'm using a different img tags for the logo, because if they are the
same, the animation doesn't work too. You can try by just change the
"logo2" from the second slide into "logo" and change
that in the jquery section too.
The slides are more complexed, this is a very basic example.
I'm gonna send you the whole project on private message.
P.S.I'm sorry for the late answer, I live in eastern Europe.
The slides are more complexed, this is a very basic example.
I'm gonna send you the whole project on private message.
Yes, that's right.- when the page loads, you want to show the first container contents, animating the logo into/over it.- when user presses the NEXT button, you want to hide the first container, show the second. (With perhaps some transition effect). And then animate the logo into/over it just like for the first container.Right?
P.S.I'm sorry for the late answer, I live in eastern Europe.
Leave a comment on emco83's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to emco83's question
{"z7664639":[14737000006086355,14737000006086369,14737000006086517,14737000006086521,14737000006086531,14737000006086535,14737000006086543,14737000006086551,14737000006086555,14737000006086679],"z24499157":[14737000006089340,14737000006089399,14737000006089403,14737000006089409,14737000006086443,14737000006086507,14737000006086519,14737000006086523,14737000006086525,14737000006086533,14737000006086541,14737000006086545,14737000006086557,14737000006088521]}
Statistics
- 23 Replies
- 7802 Views
- 0 Followers