I am using the flexslider after event to trigger another function but the after event in flexslider does not work in combination with fade on an iPad.
Using slide as animation solves the problem but I need fade instead of slide.
$('.flexslider').flexslider({
slideshow: true,
animation: "fade",
animationSpeed: 1000,
slideshowSpeed: 5000,
directionNav: false,
controlNav: false,
start: function(){animation()},
after: function(){animation()},
before: function(){}
});
I had a similar issue, I needed to execute a function in the after callback and it didn't fire off on ipad.
I made a quick workaround and I've used the before method instead, it didn't have any downsides for me because I just needed to update an external slide counter.
I have looked into the flexslider 2.1 code and I think that the lines 520-521 or 527-530 are causing problems here:
520-521
slider.slides.eq(slider.currentSlide).fadeOut(vars.animationSpeed, vars.easing);
slider.slides.eq(target).fadeIn(vars.animationSpeed, vars.easing, slider.wrapup);
527-530
slider.slides.eq(slider.currentSlide).bind("webkitTransitionEnd transitionend", function() {
// API: after() animation Callback
vars.after(slider);
});
You can debug it if you want, I hope you'll find it useful.
Related
I have a jquery animation set up, the object fades in and slides down from the top of the screen, and then it should keep moving and fade out. Right now it fades in, animates down, then pauses, then completes the animation. I'd really like to get rid of the pause, but I'm not sure how. I have the animation set up as a call back right now. You can see it here:
http://jsbin.com/uniyix/12/edit
thanks for any help I can get on this!
Information can be found here at the Jquery animate() Documentation. More specifically, the easing parameter.
There are two kinds of easing: one is swing (which is default and features an increase of velocity at the beginning of the animation as well as a slow down at the end, which can look like a "pause" if you have multiple animations set) and the other one is linear.
Linear has no slowdown as the speed is constant throughout. The easing parameter can be defined right after the speed parameter.
So this:
$('#example').animate({
'marginLeft' : "+=30",
}, 3000, function() {
});
Would become this:
$('#example').animate({
'marginLeft' : "+=30",
}, 3000, "linear", function() {
});
This should get rid of the pause as the element will be in a constant velocity throughout the entire animation.
I was wondering if it's possible to use custom animation in Sencha Touch 2. If I've done my homework correctly, then Sencha Touch by default does not provide any help with animation apart from the fade-in/out, sliders and other simple UI elements.
One would have to use CSS3 for animations, right? I wan't to use an animation (let's say something like this : http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-timing-function3) in my app.
I wan't the animation to load just after the initial loading screen but I'm not sure how to do that. Can someone help me out with the code? ELI5 please,since I'm new to ST, CSS and HTML5.
In your launch function, you need to define you Ext.Anim like so :
anim = Ext.create('Ext.Anim',{
autoClear: false,
from:{'left':'0px'},
to: {'left':'100px'},
delay: 1000,
duration: 1000
});
Then you can run this animation on any component (here on a Ext.Panel) like so :
anim.run(this.getView().element);
Hope this helps
Ok #user1324579 this steps are:
Create a CSS3 class
Create one panel Sencha
On html tag put class CSS
var panel = new Ext.Panel({
id: 'yourIdPanel',
fullscreen: true,
style: 'background-color:#ffffff',
html: '<div class="animation_css_class"></div>'
})
To load you just after the initial loading screen with id panel above or,
var mainPanel = new Ext.Panel({
id:'pnlInicio',
fullscreen:true,
items : [panel],
dockedItems: []
})
I hope these helps. :)
I'm using the Jquery Tools Scrollable plugin like this example, and I would like to have custom buttons that would make it Start and Stop. I can get it to stop autoscrolling, but I can't get it to resume autoscrolling from where I stopped it.
Here's how I initialize it:
$(document).ready(function() {
// heeeeeeeeeeere we go.
var root = $("#chained").scrollable({circular: true, mousewheel: true,
easing:'easeInOutQuint', speed: 1200}).navigator().autoscroll({
interval: 3000
});
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
From this thread, I can make it "Stop." I also know that I can also make it "Begin" - go to the first slide - by using these:
Start
Stop
Although it does go to the first pane/slide, it not longer autoscrolls. Is there a way to get it to resume autoscrolling in the location where I "Stopped" it? Also, is the window.api=root.data("scrollable"); approach deprecated? Should I approach that differently?
TIA for any suggestions.
I am currently building a site which utilises multiple flexsliders. The concept is that when the user clicks a specific button, it shows a flexslider with featured content relevant to the button pressed, which is all pretty simple stuff.
The problem i am having is at the moment, the flexsliders are firing on the click of a button, however whenever a user clicks on a different button, the slider is not reset.
I want to try and make the slider reset to slide 0 on each button click. I have tried using .stop() and some of the callback features within the plugin, but i have had no luck as of yet. Was wondering if anybody else had ever faced this before? (and won..)
the code in the footer.php is pretty standard issue at the moment:
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
});
});
I know it's been long since this question was posted, but it might help somebody.
I actually faced the same problem. After some poking around I managed to get it working using the following code:
// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");
// Unset the animating flag so we can move back to the first slide quickly
slider.animating = false;
// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);
If you want to return at the first slide, but don't want the animation to stop, just replace the last line with slider.flexAnimate(0);
I believe that the slider.stop() method doesn't unset the animating flag. In my opinion it should, because this flag is used in the flexAnimate() function to check whether to actually slide or not. If the flag is set to false, then the flexAnimate() function will suddenly return.
think the answer might lie in the start callback function. Try something like this (untested)
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
start: function(slider) {
if (slider.currentSlide != 0) {
slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
}
}
});
});
use the new api at line 1056 in flexslider like
' startAt: 0,
//Integer: The slide that the slider should start on. Array notation (0 = first slide)'
When setting up dojo connections to onmouseover and onmouseout, and then adding content on mouseover, dojo fires the onmouseout event at once, since there is new content. Example:
dojo.query(".star").parent().connect("onmouseover", function() {
dojo.query("span", this).addContent("<img src='star-hover.jpg'>");
}).connect("onmouseout", function() {
dojo.destroy(dojo.query("img", this)[0]);
});
The parent() is a <td>, and the .star is a span. I want to add the hover image whenever the user hovers the table cell. It works as long as the cursor doesn't hover the image, because that will result in some serious blinking. Is this deliberate? And is there a way around it?
Edit: Just tried out something similar with jQuery, and it works as expected (at least as I expected it to work.)
$(".star").parent().hover(function() {
$("span", this).append("<img src='star-hover.jpg'>");
}, function() {
$("img", this).remove();
});
This will show the image when hovering, and remove only when moving the cursor outside the table cell.
The reason it works with jQuery in your example is because .hover uses the normalized onmouseenter/onmouseleave events. If you were to connect to those, it would work in Dojo as expected. Also, a simulation of .hover for Dojo would be:
dojo.NodeList.prototype.hover = function(over, out){
return this.onmouseenter(over).onmouseleave(out || over);
}
Then you'd just:
dojo.query("...").hover(function(e){ .. }, function(e){ .. });
The differences between mouseeneter and mouseover are why you are seeing the behavior of an immediate onmouseout firing.