We are using the jQuery slider for our slideshow. Now, the handle is animated during playback. But if the user pauses, the handle should be set to a stationary position immediately (i.e. the animation should be stopped).
At first, I thought, this would be easiest to use the animate option (http://api.jqueryui.com/slider/#option-animate) from the slider. But I did not find a way to create a linear animation.
Therefore, we have solved this issue by now using CSS transitions. If the slider is playing, a CSS transition class is added to the handle. If the slider is paused, the CSS class is removed and the slider handle jumps into position immediately.
This works fine with Chrome and Safari, but unfortunately not with Firefox or InternetExplorer. They don't stop the handle immediately, but run the animation to the end, which is confusing because the handle does not react immediately to the user action.
The current JavaScript code for switching the CSS in the jQuery slider looks like this:
$slider.on('change.mode', function(event, playing){
if(playing)
$(this).addClass('playing');
else
$(this).removeClass('playing');
});
The CSS looks like this:
.playing .ui-slider-handle {
#x-browser > .transition(1s, linear, left); //LESSCSS Shortcut
}
You can view a live example of the complete player here:
http://lookr.com/1239271528
It works in Chrome and Safari, but can anyone tell me how to make this work in Firefox and Internet Explorer?
Update
Maybe the real question here should be: how to stop a CSS animation for sure in all browsers immediately?
This may be oversimplifying things, but you could try something like this:
Working Example
JS
// shows values in the demo
var showAmount = function (event, ui) {
$("#amount").val(ui.value);
$("#amount2").val(parseInt($('.ui-slider-handle').css('left'), 10));
};
$(function () {
$("#slider").slider({
animate: 5000, //slowed down to 5s for demo only, for normal timing set to true
value: 0,
min: 0,
max: 500, // make the max value the same as the width
slide: showAmount,
change: showAmount
});
});
// click to trigger animation to 500
$("#play").click(function () {
$("#slider").slider("value", 500);
});
// click to set the value of the slider to the handles left position
$("#stop").click(function () {
$("#slider").slider('option', "value", parseInt($('.ui-slider-handle').css('left'), 10));
});
CSS
#slider {
width: 500px; /* must match the max value of the slider */
}
This method kind of hinges on being able to set the maximum value of slider to match the width of the slider. If that's not a big problem the left position of the slider's handle will match the value of the slider and you can use that as a stopping value.
Tested and working in IE9/10, Chrome and Firefox.
Rather than animation you could try resetting/updating the value of the slider, by attaching it to an interval for eg and clearing the interval on click of pause
var myVar = setInterval(function(){myTimer()},100);
var tim=parseInt($('#slider').slider("option", "value"));
function myTimer()
{
jQuery("#slider").slider({value:tim--});
}
$("#pause").click(function() {
clearInterval(myVar);
timer = null
});
$slider.on('change.mode', function(event, playing){
if(playing){
$(this).addClass('playing');
$(this).find('.ui-slider-handle').addClass('stop'); //ADDED
}
else{
$(this).removeClass('playing');
$(this).find('.ui-slider-handle').removeClass('stop'); //ADDED
}
});
CSS (ADDED)
.stop {
transition:none !important;
}
Related
I made a slider with Swiper.js which automatically scrolls in a loop.
My code: https://codepen.io/BehnamAzg/pen/NWzmBKo
I wanted it to stop scrolling when it's being hovered, so I add this code:
autoplay: {
disableOnInteraction: false,
pauseOnMouseEnter: true
}
This is working fine, but the speed of scrolling is too high
so to adjust that I have to add a speed (transition duration) to it. but by adding this it makes the mouseEnter a delay to make an effect.
For example:
If I set the "speed" to 5000ms, it would take 5 seconds till the slider stops scrolling when it's hovered.
I don't want this "speed attribute" effects my hovering, I want it to immediately stop the scrolling.
For solving this, I tried to add a delay instead of speed but it will remove the smoothness of scrolling.
I tried to set the transition duration to zero while being hovered with CSS, but that also didn't work:
.swiper:hover > .swiper-wrapper {
transition-duration: 0 !important;
}
I also tried to add a swiper.setProgress(progress, speed) to it and set the speed to zero, it did work but it will mess up the progress of the slider:
$(".swiper").each(function(elem, target){
var test = target.swiper;
$(this).hover(function() {
test.setProgress(0, 0);
}, function() {
test.setProgress(0, 5000);
});
});
I don't know what to do anymore, any suggestions?!
I am creating a simple slot machine and currently using TileSprite to achieve the effects that I want - for the spinning. So far, everything works. However, after the timer stops the initial spin, I want to smoothly scroll the texture to the correct 'result' position:
R1TimerTrigger: function()
{
R1Scroll = false;
game.add.tween(SpriteReel[0].tilePosition).to( { y: R1Result }, 1000, Phaser.Easing.Bounce.Out, false);
}
There are some immediate problems, in that apparently the native tween does not recognize properties of children. Is there a way to solve this, or an alternative approach that does not use tween to achieve the result?
You code looks fine to me and the tween should work on the tile sprite as expected.
Are you starting the tween? You can start the tween automatically using 'true' as the 'autoStart' parameter
to(properties, duration, ease, autoStart, delay, repeat, yoyo)
game.add.tween(SpriteReel[0].tilePosition).to( { y: R1Result }, 1000, Phaser.Easing.Bounce.Out, true);
Working example here https://phaser.io/sandbox/edit/iTLritEj
Look in the Play and Create tabs
I have a JS feature on the following site that is working just fine in Firefox but not in Safari: http://rossbolger.com/kids/light-stories/
The feature slides out a grid of thumbnails called #image-thumbs when the mouse hovers over the container called #hit-area. It works (at least in Firefox) by first changing #image_thumbs height from '48px' to 'auto', the height is then measured using jQuery's height(). This height is stored in a variable and then using jQuery's css() it is given back to the #image-thumbs when the mouse is over.
The code on the site looks a little something like this:
// Thumbnails Nav Reveal and Hide Scripts
var thumbs_height = 1,
thumbs = $('#image-thumbs'),
thumbs_original_height = thumbs.css('height');
// Slide Up Thumbs
(function revealThumbs() {
// On hover let the thumbs become their full height
$('#image-thumbs #hit-area').hover(function(){ // Mouse over
// Get the unrestricted height of the thumbs
thumbs.css('height', 'auto');
thumbs_height = thumbs.height();
// then put it back to what it was so we can animate it using CSS3 transition
thumbs.css('height', 'inherit');
// delay 0.1s before triggering the change in height (time for the calculations to complete)
setTimeout( function() { thumbs.css('height', thumbs_height ) }, 100 );
}, function(){ // Mouse out
hideThumbs();
});
})();
// Hide thumbs
function hideThumbs(){
thumbs.css('height', thumbs_original_height );
};
The reason for measuring the unrestricted height and passing it back as a pixel value, rather than simply setting the height to 'auto', is to create a sliding effect via CSS3 (i.e. transition: height 0.5s). The transition only takes place if the affected attribute goes from one numeric value to another.
Thanks for any help bug testing this. I haven't even looked at other browsers yet.
All the best,
Laurence
Okay, so I've worked it out...
In the javascript document (scripts.js on the site) there was a function higher up the page calling the hideThumbs() function. So it wasn't working because the variables in hideThumbs() hadn't been declared at that point. Funny that it should still work in Firefox and IE9!
I've moved all this code to a point before that other function and the problem is now resolved. So far I've only done this locally. I'll update the site in the link above later.
I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here
The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.
In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.
The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)
Okay, now for the code. Here's the basic JQuery that I'm using:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
I've also recreated the behavior in a JSFiddle.
Any ideas on what's going on? :)
==EDIT== UPDATED JSFiddle
It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.
http://jsfiddle.net/W5EsJ/18/
If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.
You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)
Update
I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});
You could use .stop() and also use the outer container position
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
DEMO
Hope this helps
Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.
Add following piece of code to check if the div is already 'animating':
if ($(this).is(':animated')) {
return;
}
Code: http://jsfiddle.net/W5EsJ/2/
Reference:http://api.jquery.com/animated-selector/
I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover
The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne.net/brian/resources/jquery.hoverIntent.html
If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent