I shamelessly tried to rip JQTouches solution for animating a flip between two internal pages (div's). But did I miss something, a CSS rule perhaps? Cause I think it looks a bit funny..
Have a look: http://jsfiddle.net/wije/x3xz2/4/
Here's the original:
http://jqtouch.com/preview/demos/main/#animations
The 2 animations need to be separate, and then you add 2 event handlers for the animation endings; once the first div is hidden, show the other one.
Related
So I've finally cracked SVG animations (totally through cheating) and like most sites that use them if they're halfway down the page they begin automatically and you miss it, so how is it possible to trigger the animation on scroll to that div container?
Any help would be great,
Thanks!
You can use
beginElement() function to starts animations manually.
for this to work, you have to set the begin attribute of animate element to indefinite
a simple example would be something like
window.onscroll = function(){
var anime= document.getElementsByTagName('animate')[0];
// check for the amount of scroll
anime.beginElement();
}
You could also make use of beginElementAt()
read more about svg Animation Timing Control
side note: Can't be more accurate since you haven't shared much info or code samples, and not sure what you meant by 'cheating'
I'm trying to make a "More" functionality for comments.
How I'm trying to make it work:
I split comment in 2 parts - 1st 200 symbols and the rest of the symbols.
The rest of the symbols are placed in a <span class="hidden_comment_container" ></span> which by default gets display:none
Toggle to show the rest is placed if needed (if comment length > 200 symbols).
This is working more or less fine (jsfiddle demo) but there are 2 problems.
Upon slidedown, hidden_comment_container receives display:inline-block and messes up things a bit, since it gets transferred to a new line (check demo to see what I mean)
When sliding down and sliding up, near the end of animation you can notice some twitching.
Can anyone please help me solve these 2 problems?
The first one can be resolved by adding the following to the case when the remaining text is hidden.
$(this).next(".comment_container").children('.hidden_comment_container').slideDown('medium', function() {
$('.hidden_comment_container').css('display', 'inline');
});
Basically you're changing the display attribute of the .hidden_comment_container selector as I believe slideDown is adding a display:inline-block to it which would cause it to jump a line.
Fiddle here
Answer to point 2 can be found in Basic jQuery slideUp and slideDown driving me mad!; basically you need to explicitly add the height of the element before hiding / showing it.
As a side note the css property content can only be used with the pseudo elements :after and :before; I updated my fiddle accordingly.
An alternative solution
Have a look at this script, it does everything you need! I tested it already on another project and it works like a charm: jquery plugin to truncate elements based on height instead of number of characters
I am using animate.css for a feed. I have a div named feed that uses uses the slideInLeft class, remains for 3 seconds, then uses the fadeOut class. At this point, I need to change the content of the div and start again. Here's what I've got:
HTML:
<div id="feed"></div>
JS:
var myCars=new Array("Saab","Volvo","BMW");
var wIndex = 0;
$('#feed').text(myCars[wIndex]);
setInterval(function () {
++wIndex;
if (wIndex >= myCars.length) {
wIndex = 0;
}
$('#feed').removeClass('animated slideInLeft');
$('#feed').addClass('animated fadeOut').addClass('hidden');
$('#feed').text(myCars[wIndex]);
$('#feed').removeClass('animated fadeOut').removeClass('hidden');
$('#feed').addClass('animated slideInLeft');
}, 3000);
http://jsfiddle.net/tjfo/5a3SL/
The initial change from the first element in the array to the second works properly, fade out, slide in. All the following transitions just change the text in the div with no fade out, slide in. Animate.css is the preferred method for completing this task. Can anyone help figure out how to make it work properly?
Thanks!
I think you're looking to remove the animated and slideInLeft classes prior to applying subsequent classes. Maybe remove those classes right off, then in a timeout of say, 25ms, do the rest of the logic.
Here's a demo: http://jsfiddle.net/5a3SL/3.
When animating with CSS this is a fairly common thing since you need to give the browser time to calculate the new layout without those classes before applying new classes, otherwise the correct state won't exist in the layout for the new class to properly animate.
Also, that honestly seems like too much CSS for a simple animation... the trickiest thing about animations is having to re-write your CSS declarations for 4 different vendor prefixes as well as the standard declaration.
Another way to handle this would be to set a timeout at the end of the loop that is at least as long as the animation (the slide-in) and remove the unnecessary classes then.
I want to stop a transition that is in progress.
I have found a few references[1][2] scattered around the internet but I can't seem to piece it together.
Here's a fiddle of the first suggestion (With jQuery and CSS Transit for context): http://jsfiddle.net/thomseddon/gLjuH/
Thanks
[1] https://twitter.com/evilhackerdude/status/20466821462
[2] github.com/madrobby/zepto/issues/508
So I figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/
The trick is to set each css property you are animating to its current value (possibly mid transition) like: $(this).css('prop', $(this).css('prop')); (Probably would want to store all properties in an object in the element with $(this).data(props); and loop through them).
Once you have explicitly set the properties you can run a 0s animation to override the previous animation and effectively halt the element.
There's a much simpler solution. If you want to just stop the transition (and not pause it). Just set the css to current computed style. For example in a custom scrolling solution, where top is transitioned property.
element.style.top=getComputedStyle(element).top;
and that's it.
I'm having an unexpected effect and some other bugs when trying to use show/hide with mouseover and mouseout.
What I was trying to do is have a box (div) and when you would mouse over it, another box would appear and slide to the right.
Here's the fiddle for it
http://jsfiddle.net/XtXGR/
Now there's two problems with it. One is the flickering and the other is that it appears by growing from the top-left corner and what I want it to do is appear from the left.
Any help would be greatly be appreciated. Thanks
I think I know what causes the flickering from the similar questions but I still need help with the other issue. Thanks!
Oh also just so you know the context in which this will be used is on a page with a table of items and each item would be the object in the fiddle link I posted above.
The main issue is that moving over a different child element of the container will trigger a mouseout and mouseover combination, which is why you see the element expanding and collapsing. IE circumvented this with the mouseenter and mouseleave events, which act exactly like the CSS :hover.
Speaking of which, the jQuery hover function has this feature too. You should use that instead of mouseover and mouseout.
According to the show API, you should use the slide effect to get what you want.
Your final code should look like this: http://jsfiddle.net/XtXGR/28/
A couple things:
If you want to do a fadein/out this would be better:
$(document).ready(function(){
$("div.item_container").hover(function() {
$("div.item_body").fadeIn(500);
}, function() {
$("div.item_body").fadeOut(500);
});
});
Also, you should probably float the div .item_body to the left..
Demo: http://jsfiddle.net/lucuma/XtXGR/33/
How about using CSS3 transitions instead?
See this: http://jsfiddle.net/EVDj6/2/
Something like this? Using slide will give you the slide from default left effect.
$(document).ready(function(){
$("div.item_container").on('hover',function(){
$("div.item_body").toggle('slide',500);
});
});
http://jsfiddle.net/XtXGR/25/
There were many issues in your code. The href's were invalid and the floating of the elements was not 100% correct. One of the main issues was that you had display:none in your CSS. Bring that dispay:none out and of the CSS and put it inline on the item you want to show/hide. When its default state is "hide" then you need to bring the display:none inline.
Look at this fiddle to get a better idea of how to go about this with a bit more valid syntax:
http://jsfiddle.net/fH3EC/1/
I made something fast, you can go crazy with it :) The animation is pretty smooth, I hope it's useful for you.
http://jsfiddle.net/XtXGR/50/