I have a menu that I'd like to appear at full-width when the page loads and then contract after for a few seconds. I've done that successfully by assigning a setTimeout function to my timer variable:
var timer = setTimeout(function() {
$('nav').animate({width: '100p'}, 600, 'swing');
}, 1500);
I'd also like to animate the width of my div on a hover event as follows:
$('nav').hover(function() {
clearTimeout(timer);
$(this).stop().animate({width: '100'}, 400, 'swing');
}, function() {
$(this).stop().animate({width: '30"}, 400, 'swing');
});
My concern is overall optimization. Obviously once the timer is complete it will never reset but essentially the user will call that clearTimeout function every time they mouse-in to that div. I first thought to use the method, one() but didn't want to create a completely new action outside the hover() event I have setup now. Is there any workaround to this?
I'd tackle this with a css solution. Note that there would be legacy browser issues with the transition animation.
nav{
width:30px;
}
nav.initial-expand, nav:hover{
width:100px;
-webkit-transition: width .4s; /* Safari */
transition: width .4s;
}
Remove .initial-expand
var timer = setTimeout(function() {
$('nav').removeClass('.initial-expand')
}, 1500);
Since either .initial-expand or :hover trigger the expanded look, the removal of the class won't matter if they're hovered.
Also, I'd recommend animating it on/off screen using position left/right rather than width, as making it narrower can cause text wrapping oddities.
Related
I am trying to sync Javascript with CSS transitions, and I have done it right.
I basically created a callback that fires after X seconds, and everything works fine IF the transition completes normally. However, when the transition is interrupted BEFORE completion by another transition, like when you leave the mouse from a div when you're altering its width (for example, the div is 100px wide, mouseover -> 300px mouseout -> 100px. You mouse-leave the div before it reaches 300px, the transition DO NOT calculate the full-duration!), I don't know how to calculate the new duration.
I have tried the trasitionend event but is currently an instable solution to me.
CSS
div {
width: 100px;height: 100px;background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
HTML
<div id="mydiv"></div>
JS
let mydiv = document.getElementById('mydiv')
let i = 0;
var callback = function() {
i++;
mydiv.innerHTML = 'done ' + i;
}
mydiv.addEventListener('mouseover', function() {
setTimeout(callback, 2000+10);
});
mydiv.addEventListener('mouseout', function() {
setTimeout(callback, 2000+10);
});
As you can see, the callback is broken when you do not wait for the transition to fully complete, of course.
Is there a method to calculate the "cut" duration from the previous start point, in order to set a proper duration for the timeout, instead of using the "static" css duration?
Thank you in advance.
It may be obvious I'm very new to web development. Anyway, I'm trying to create a click event on a div and change its background color. But I want the background to change back to its original color after the click up. Here is what I have:
jQuery:
$('.details1').click(function() {
$(this).toggleClass('on').delay(200).toggleClass('on');
});
css:
div.on {
background: #F78181;
}
I don't exactly want a millisecond delay, that's just for debugging. Just want to change background on click down and up. Thanks.
You have to use setTimeout() function for your problem instead of delay()
$('.details1').click(function(){
setTimeout(function(){ $('#clrd').toggleClass('on'); }, 200);
});
you can change the time (milliseconds) as per your need. In this case it is 200ms
Check this Fiddle
Pacient: http://demo.imatte.us/fomru/landingpage.html
Problem: http://gyazo.com/031fe1c5413550e6e68aceef2740cefc
When window's size is changing, then we can see content of other slide. But after release the window's border, elements moving to right places with animation after small delay. How to disable this delay and animation, and force elements to stay on right positions constantly?
As #flybear pointed out, you would need to modify the plugin for it.
You would also need to change the scrollingSpeed of the plugin by using $.fn.fullpage.setScrollingSpeed(0). But this will only work if you use css3:false.
You should change the current event resize for this one:
//when resizing the site, we adjust the heights of the sections, slimScroll...
$(window).resize(function () {
// rebuild immediately on touch devices
if (isTouchDevice) {
$.fn.fullpage.reBuild();
} else {
$.fn.fullpage.setScrollingSpeed(0);
$.fn.fullpage.reBuild();
$.fn.fullpage.setScrollingSpeed(700); //default one
}
});
If you want to make it work with css3:true as well, you would need to deal with the css3 animations defined in the .fp-easings class. You probably can create another CSS class to overwrite the .fp-easings one defining a transition with 0 seconds:
//when resizing the site, we adjust the heights of the sections, slimScroll...
$(window).resize(function () {
// rebuild immediately on touch devices
if (isTouchDevice) {
$.fn.fullpage.reBuild();
} else {
$.fn.fullpage.setScrollingSpeed(0);
$('.fp-easings').addClass('.fp-no-transitions');
$.fn.fullpage.reBuild();
$.fn.fullpage.setScrollingSpeed(700); //default one
$('.fp-easings').removeClass('.fp-no-transitions');
}
});
CSS
.fp-no-easing {
-webkit-transition: all 0s ease-out !important;
transition: all 0s ease-out !important;
}
Just take into account that on every resize event, which can be fired hundreds of times when you resize the browser's window, will execute the reBuild function of the plugin, which will take care of resizing sections, updating the inner containers and scroll all the sections and slides of your site to fit the new position.
Firing this hundreds of times can cause some problems in slow computers and will slow down the page.
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;
}
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.