How can I show a div growing from top and bottom with jqueryui effect?
I tried this code:
$('div#my').show('clip');
but it does not work.
Does slideUp or slideDown help you?
$('div#my').slideUp('slow');
$('div#my').slideDown('slow');
You can actually use animation without jQuery UI using .show( [duration] [, easing] [, callback] ).
The code for this would be $('div#my').show('slow');
For using custom effects such as clip, I would think your code would work as expected, but if not maybe your path to your jquery UI is off?
Here is a demo of your code working as expected: http://jsfiddle.net/ysHgp/
An other way is $('div#my').animate({ height: heightOfDiv_my }, "fast");
Related
I am using jquery for smooth scroll this way
$('.parent-class').animate({
scrollTop: $('#scrllhere').offset().top + 10
}, 800);
Goal here is on click, i am calling one function based on certain condition i am using above code for scroll this is working fine but i want to achieve same using angular 5 animation without using jquery.
my function is like this
smoothScroll(){
$('.parent-class').animate({
scrollTop: $('#scrllhere').offset().top + 10
}, 800);
}
Now i want to achieve same thing without using jquery
After going through angular5 animation docs https://angular.io/guide/animations
I am little confused how to use animate() on the fly for scrolling
Note that there is no state change involved just scrolling
Edit: Even solution in Javascript without using jquery is fine.
Thanks
What I need to achieve is that when you swipe up the page from the arrows, the page needs to slide up and the user will be redirected to another page (as an intro).
I currently have a working way to use the slider:
The question is: how do I actually make an effect that looks like the page goes up when the slider is used?
There are many different ways to do it. As I prefer to do it without plugins (well except jQuery), here's my way to achieve this:
1. Detect the Swipe
This can be achieved with the "touchstart" and "touchend" events. If the touchstart event is fired, you'll get the coordinates of the touch position. When the touch ends, get it again and compare the distance.
There are many really helpful articles about this topic.
here or here or just google "javascript swipe"
2.Scroll down
Can be done in many different ways, depends on what animation you want. Google for "smooth scrolling javascript". If you use jQuery, this might be the easiest way:
function afterscrolling(){
$('html, body').animate({
scrollTop: $( YOUR_ELEMENT ).offset().top
}, 500);
return false;
};
You can use Hammer.js
var swipe = new Hammer.Swipe();
swipe.recognizeWith(swipeup);
See swipe-recogniser.
So once you recognise the swipe-up gesture, you can animate the div to translate up using css.
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Refer this
Made a Codepen http://codepen.io/keephacking/pen/RaYxpm
Used jQuery touchSwipe and slideUp in jquery for the effect
For more about TouchSwipe ,Check link below.
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
I've replicated the fluid/responsive mode of Isotope: http://isotope.metafizzy.co/demos/fluid-responsive.html but with the addition of animating the width of the clicked element using "transition: width 0.3s". This does work, however it disables the 'reLayout' animation of which I'm triggering on 'transitionend'.
I'm thinking that one is overriding / conflicting with the other. Has anyone had similar issues or know a way around this? I've tried setting 'animationEngine : 'jquery', and this does resolve the issue, but it looks terrible - browser re-paining issues!?
Thanks for any help!
And here's a live demo...
http://www.voyced.com/isotope-test/
If you disable the css property "transition: width 0.3s" in the developer tools the 'reLayout' animation works again.
Issue a $(window).resize() after you animate the item.
or
$container.isotope('reLayout', function() {
$(window).resize();
});
is there anyway to ease my page scroll? I'm doing a horizontal page scrolling. Its working, as you can see below, but I want to make a ease scroll.
Already tried to scroll it whit css3 transitions on jQuery (via Transit) and didnt work because it triggers too many times.
How can I do this?
Thanks!
$('#holder')
.bind('mousewheel', function(event, delta) {
this.scrollLeft -= (delta * 20);
});
You would have to use animate function. A simple example I have done is here
http://jsfiddle.net/bd6pf/2/
Scroll to the right and and try to scroll on element
I have been over this and its best to just use jQuery to do this or at least javascript, I know its cool to use CSS3 and I try to use it as often as possible but in this case I would stick with the javascript.
Here is a great one that I have used:
http://pagescroller.com/
i saw an effect in iconArchive site and i don't no how to apply it if one of you help me to get the idea with small example this will be nice.
under this link :http://www.iconarchive.com/search?q=share&page=3 if you go over the heart img then a copy of it will move to the bottom and add the icon you have selected. i have no idea how to start for that reason i don't have any code .
i think they use java script +jquery+ css to do it.
The jQuery animate function can do this neatly: http://jsfiddle.net/bX6Uk/.
$('#button').click(function() {
$('#div').animate({
top: 300,
left: 10,
}, 'slow');
});
To achieve the specific effect on your example page you should check out the jQuery UI Transfer effect.