I'm animating elements on the page and stop the animations when the browser is resizing.
All elements animated by animate() are stopped, but not the one with toggle() with jQueryUI effect.
Below is the function.
function animateMainEyelid()
{
$main_eyelid.delay(1000).toggle('blind', {direction: 'up'}, 3000);
}
function stopMainEyeLid()
{
$main_eyelid.stop(true, true);
}
Can anyone help me if there is anyway to stop the animation triggered inside the toggle function,or the other way to execute the animation that can be stopped?
Related
I started to use recently an awesome plug-in to convert touch evens to mouse clicks. But just today I came across one problem
jQuery('.draggable').click(function(){
alert('clicked');
})
To fire alert I need to make two touches(mobile device), while on computer I need only one mouse click. What can be the problem? Thank you.
// set a var as false as a way to change and flag if something is being dragged
var dragCheck = false;
$('.element').draggable({
revert: true,
drag: function(){
// On drag set that flag to true
dragCheck = true;
},
stop: function(){
// On stop of dragging reset the flag back to false
dragCheck = false;
}
});
// Then instead of using click use mouseup, and on mouseup only fire if the flag is set to false
$('.element') .bind('mouseup', function(){
if(dragCheck == false){
// do the click action here...
}
});
Is it possible to get transition flip effects when showing a div manually, similar way as we get when using functions like
$(':mobile-pagecontainer').pagecontainer("change", "create_an_account.html?UUID=" + UUID, {
transition: 'flip'
});
This is my fiddle
http://jsfiddle.net/EwNRJ/2265/
Could you please let me know how to achieve this??
jQM uses CSS transitions for this. for flip, you can use the existing classes called ".flip .in" to flip in and ".flip .out" to flip out.
$('#target')
.append('<span>1. Append</span>')
.prepend('<span>2. Prepend</span>')
.before('<span>3. Before</span>')
.after('<span>4. After</span>')
.show()
.addClass("flip in")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass("flip in");
});
You use addClass to add the transition classes (.addClass("flip in") ), then handle the animationend event to remove the classes when the transition is complete. To hide the DIV with a flip:
$('#target')
.addClass("flip out")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass("flip out");
$(this).hide();
});
Add the flip and out classes and on animationend, remove the classes and call hide().
DEMO
NOTE: For more interesting transitions, you can use animate.css with similar code:
https://daneden.github.io/animate.css/
There is a image and a button on Watchkit interface.
Image animation starts and i press the button, animation pause.
Now i need to read which frame is currently displayed.
Is it possible?
As Aleksander said it is not possible to get the right frame name from your animation. However you could divide your animation in parts and call the next part when the previous part is done animating. You could try my framework I just released to ease your work with animations and also have a completion handling.
TimelineKit - Framework
func startAnimationWithRange(range: Range)
{
Timeline.with(identifier: "MyAnimation", delay: 0.0, duration: 2.0, execution: {
// put your animation code in here
// assumed animation time == duration (2.0 seconds)
}, completion: {
// check if your button was clicked and return or call the next animation part
self.startAnimationWithRange(range: nextAnimationRange)
}).start
}
Check the TimelineKit.swift source file for documentation. Feedback is also welcome. :)
I have the following setup:
$('.my-list').sortable({
handle: '.drag-handle',
start: function(event, ui ) {
//check to see if allow drag and drop
var should_disable = check-code-goes-here ;
if (should_disable) {
//how to disable
}
},
stop: function(event, ui ) {
}
});
When dragging a .drag-handle element, I need to check a condition to see if it is allowed to be dragged and dropped. If yes, go as normal. If not, I would like to disable the whole drag/drop operation. Note that I cannot determine whether a .drag-handle element should be draggable or not at page load, which is why I need to check at the time of each drag/drop operation.
Thanks and regards.
Check this JSFiddle link
http://jsfiddle.net/shuklendu/uacc7/17/
in that example a class 'fixed' added to item which don't want to drag and cancel property set to sortable by
$("#sortable").sortable({
cancel: ".fixed"
});
I'm trying to integrate this plug-in into my site so I can swipe to delete. The problem however is that this plugin is triggered with a 'swiperight', the same swipe event is used to reveal my panel. I managed to separate the events using event.target.tagName. When it's a A(link), I want to activate the swipe to delete button and otherwise I want my panel to slide in.
With other words the pageinit event is triggered twice so the swipe to delete button starts to appear then the same event is triggered again. I want to somehow cancel one action but i can't make it work. I already tried:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
I also tried to use some solutions given here but with no luck:
jQuery Mobile: document ready vs page events
A demo of my problem can be found snip and my current pageinit function is this:
$(document).on('pageinit', function() {
//Activate horizontal swipe after x px.
$.event.special.swipe.horizontalDistanceThreshold = 80;
$('div[data-role="content"]').on("swiperight", function(event) {
//If tagname is 'A' you probably want slide to delete not the panel
if(event.target.tagName != 'A') {
$.mobile.activePage.find("#menu").panel("open");
} else {
//Cancel swipe
event.stopImmediatePropagation();
}
});
//Swipe to delete
$("#swipe li").swiper( {
corners: false,
label: "Verwijder",
swipe: function(event, ui) {
alert('trigger');
},
click: function(event, ui) {
var $item = $(this);
//console.log($(this));
$item.fadeOut(250, function() {
$item.remove();
});
}
});
});
Fixed issue using the following plugin: TouchSwipe which has the ability to simple exclude elements from the events.