I'm using the animation below to slide my toolbar up and it slides up, but it doesn't stay. It slides back to its original position. Is this normal behavior?......if so do I have to explicitly set the new top value for the toolbar? Also in my toolbar config , I specify: top: 1536.
Code:
Ext.Anim.run(toolbar,'slide',{
direction: 'up',
duration: 1000,
from:{top:1536},
to:{top:1432}
});
Try this. It should work
Ext.Animator.run({
element: toolbar,
duration: 1000,
easing: 'ease-in',
preserveEndState: true,
from: {top:1536},
to: {top:1432}
});
Related
I've got a StackLayout where one of the entries is a GridLayout of a fixed size. Normally this GridLayout is not visible.
On tapping a button, I'd like the GridLayout be made visible - but I'd like to animate it open - - like a menu open.
Any ideas?
Actually toggling visibility is not too bad - it seems to animate the open - any way to control the speed?
The close operation is maybe too fast for what I'm trying to achieve.
You could animate the opacity of your grid. so when you click on it you would
// View is your gridView, this would hide it completely
view.opacity = 0;
// when you want to show it.
// fade in view.
view.animate({
opacity: 1,
duration: 250
}).then(() => {
//Set the visibility to collapsed after the animation is complete
//I believe you will want to do this so that the surrounding views adjust accordingly.
view.visibility='collapse';
}, (err) => {});
// when you want to hide it.
// fade out.
view.animate({
opacity: 0,
duration: 250
}).then(() => {
view.visibility='visible';
}, (err) => {});
You also may want to look into translate for you animations so you can move view down, left, up, right any way you want.
I'm developing a TimeLine component. There are Views list inside horizontal ScrollView that represents half an hour blocks. And I have a Component called TimeRangeSelector, which I use to select a range of time in TimeLine ScrollView. So while I scroll the ScrollView I need to move the TimeRangeSelector in parallel without any lag. Below is the TimeLine component. You can see the 30mins blocks are filled inside ScrollView. The yellow color one is the TimeRangeSelector which is a Animated.View. And the left position of the TimeRangeSelector is set using the scroll position. Each time ScrollView moves im setting the state as below.
<ScrollView
horizontal={true}
onScroll={this.onScrollFunc}
>
{timelineElements}
</ScrollView>
onScrollFunc = (event, gesture) => {
this.setState({
contentOffsetX: event.nativeEvent.contentOffset.x,
scrollStopped: false
});
};
And Im passing the scrollBarPosition as props to the TimeRangeSelector and setting its left position style as shown in below code
<TimeRangeSelector
scrollBarPosition={this.state.contentOffsetX}
/>
let styles= [
{
position: "absolute",
left: this.props.scrollBarPosition,
backgroundColor: backgroundColor,
marginTop: 20,
marginLeft: 1,
width: this.state.selectionWidth,
height: 100
}
];
But the issue is when I scroll the ScrollView the TimeRangeSelector moves with it, but it has a delay.. when I scroll faster the distance between where it should be and where it is, is becoming high. Can anyone give me some ideas according to your knowledge.
My assumption: According to my understanding, I think the lag is because of it takes several instances to reach the setState in and set the ScrollBarPosition as below steps.
ScrollView moved 1 frame.
ScrollView fires the onScroll function and emmits the event with new x point.
Then in the onScroll function it sets the State.
As I understand it takes some time to happen all these steps from JavaScript thread all the way to Native Thread and come back to JS thread again.
You should use something like const onScroll = Animated.event([{ nativeEvent: { contentOffset: { x: animatedValue } } }], { useNativeDriver: true }); with const animatedValue = new Animated.Value(0). This way the animation is only done on the native level without going back and forth through the JS thread.
This animated value can only be used effectively with opacity and transform style properties, but it should help you with your problem.
You can read more about this, in this awesome article.
i have a page that shows a div on mouseover i want the page to move to the div on focus....i got help here to do that...
Now i want the onfocus to the div to move with the easing plugin and move it. i dont want to use the 'slow' in the animate e.g
$('html, body').animate({ scrollTop: $('#box0').offset().top }, 1000);
how can i apply easing to the above code
Secondly i want the div that is showing to slide out from left to right on mouseenter and slide right to left before hiding.
this is what i am using for now. I know there is a better or best way to achieve what i am doing right now.
$("#app0").mouseenter(function () {
$("#lSection2").show('slide').delay(3000); //container for div of four
$("#boxContent0").slideDown(2000);$('html, body').animate({ scrollTop: $('#app0').offset().top }, 1000);// one of the divs within #lSection2
});
$('#boxContent0').mouseleave(function() {
$("#boxContent0").fadeOut(1000);
$("#lSection2").fadeOut(1000);
});
Thanks for your help
The easing can be added as follow, see http://api.jquery.com/animate/
.animate( properties [, duration] [, easing] [, complete] )
You can use hover for mouseover and mouseout.
$("#app0").hover(function () {
// Mouseover
$("#lSection2").stop(true, false).width(0).animate({ width: 200}, 1000);
},function(){
// Mouseout
$("#lSection2").stop(true, false).width(0).animate({ width: 0}, 1000);
});
The stop is needed otherwise mouseover, mouseout, will complete the first animation and then the next and the next and the next, this way you can stop the animation and continue with the next.
I'm having some issues when trying to renew the nivoslider when loading dynamic content. What I need to do is update the slider when I load new content in through an AJAX call.
So basically I have a div that gets new data in from a function AJAX call and after the load I would need the slider to reinitialize.
What I do right now is this:
if ($('#imageSlider').find('div.nivo-slice').length > 0) {
$('#imageSlider').data('nivoslider').stop();
$('#imageSlider').removeData('nivo:vars');
$('#imageSlider').removeData('nivoslider');
$('#imageSlider').attr("class","");
$('#imageSlider').attr("style","");
}
$('#imageSlider').html(newImages);
and then a call to $('#imageSlider').nivoSlider();
It kinda works but the rotation gets stuck on one picture only and sometimes it just doesn't load. Any help on this would be greatly appreciated.
I found a solution for that . Instead of replacing only images inside I replaced html inside . So like made new nivoslider content and it works for me. Then initlize again nivoslider with all parameters
After ajax response -
j('.slider-wrapper').html('');
j('.slider-wrapper').html(request);
j('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 5, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
i have written this code to apply 'jQuery Tooltip plugin' to ajax loaded elements.
i mean the row i want to show tooltip on its mouseover is loaded into page by ajax.
here's the code:
$("[id^=pane]").delegate("[id^=comm]","mouseover",function() {
$(this).tooltip({
// each trashcan image works as a trigger
tip: "#tooltip",
// custom positioning
position: "center right",
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
}).dynamic({ bottom: { direction: "down", bounce: true } });
});
the tooltip is shown when mouseover but firebug report this error:
"$(this).tooltip({tip: "#tooltip", position: "center right", offset: [0, 15], delay: 0}).dynamic is not a function"
is it because of using $(this) ???
The problem is that you haven't loaded the dynamic function. From the jQuery tools documentation:
the dynamic plugin and the slide effect are not included in the standard jQuery Tools distribution. You must download a custom combination to include those effects.
Furthermore, you don't need your delegate call. You are redoing the tooltip creation on every mouseover. You only need to do it once; the plugin will handle the events internally.
$("[id^=pane] [id^=comm]").tooltip({/*...*/})
.dynamic({/*...*/});
This selects all elements with ids beginning comm that are children of elements with ids beginning pane. Note that adding appropriate classes to all these elements would speed up your selection significantly.
it is solved now,i searched more in google and found the solution.
here it is:
$("[id^=pane]").delegate("[id^=comm]:not(.hastooltip)","mouseover",function() {
$(this).addClass("hastooltip").tooltip({
tip: "#tooltip",
position: "bottom center",
offset: [-10, 0],
delay: 0
}).dynamic({ bottom: { direction: "down", bounce: true } }).mouseover();
});