The behavior I'm trying to achieve is this:
On hover/mouseenter, change the background image from the placeholder to a gif whose positions changes in order to achieve an animated effect, then go back to the placeholder when the mouse leaves.
My code is
$('.filmstrip').mouseenter(function(){
var $that = $(this),
w = $that.width(),
fr = $that.attr('data-framerate');
$that.css('background-image','url('+$that.attr('data-gifurl')+')');
for ( var i = 1, n = $that.attr('data-ticks'); i <= n; ++i )
{
(function(j){
setTimeout(function(){
$that.css('background-position-x','-'+(w*j)+'px');
}, j*fr);
})(i);
}
$that.bind('mouseleave',function(){
$that.css('background-image','url('+$that.attr('data-placeholder')+')').css('background-position-x','0');
});
});
and the bug I'm having is that if the gif hasn't finished animating, then the
.css('background-position-x','0')
part of
$that.css('background-image','url('+$that.attr('data-placeholder')+')').css('background-position-x','0');
});
doesn't work because the background position is still being moved by the animation. So I need some way to first stop the setTimeout stuff if it isn't finished running. Any idea how I can do that?
This may be something better done with CSS rather than javascript.
Option #1 - Use an actual GIF
You could compile the frames which you want animated into an actual GIF file, and then have the background image change based on hover:
<div class="filmstrip"></div>
And then CSS
.filmstrip { background:transparent url('static_image.jpg') no-repeat 0 0 }
.filmstrip:hover { background-image:url( 'animated_image.gif' ) }
Option #2 - Use CSS3 Animation
You could keep the animated image as a strip of frames (of a known length) and then use something like:
<div class="filmstrip"></div>
With CSS
.filmstrip { background:transparent url('static_image.jpg') no-repeat 0 0 }
#keyframes animate-bg {
0% { background-position: 0 0 }
100% { background-position: -1000px 0 }
/* where 1000px is the length of the strip */
}
.filmstrip:hover { animation: animate-bg 5s steps(50) infinite }
/* where 5s is the overall loop length time and 50 is the number of frames in the strip */
Option #3 - Use Spritely
Spritely is a jQuery plugin which seems to manage all elements of turning a filmstrip/sprite image into an animation, including being able to start/stop the animation, reset to the first frame, change FPS, etc.
Add a stop variable :
$('.filmstrip').mouseenter(function(){
var isStopped = false;
var $that = $(this),
w = $that.width(),
fr = $that.attr('data-framerate');
$that.css('background-image','url('+$that.attr('data-gifurl')+')');
for ( var i = 1, n = $that.attr('data-ticks'); i <= n && !isStopped; ++i )
{
(function(j){
setTimeout(function(){
if (!isStopped) {
$that.css('background-position-x','-'+(w*j)+'px');
}
}, j*fr);
})(i);
}
$that.bind('mouseleave',function(){
isStopped = true;
$that.css('background-image','url('+$that.attr('data-placeholder')+')').css('background-position-x','0');
});
});
If isStopped is not accessible (because not tested) from the timeout, then just create a new variable in a inner scope which you affect isStopped value.
You can use an interval based solution like
$('.filmstrip').mouseenter(function() {
var $that = $(this),
w = $that.width(),
fr = +$that.attr('data-framerate'),
ticks = +$that.attr('data-ticks');
$that.css('background-image', 'url(' + $that.attr('data-gifurl') + ')');
var counter = 0;
var interval = setInterval(function() {
$that.css('background-position-x', '-' + (w * ++counter) + 'px');
if (counter >= ticks) {
clearInterval(interval);
}
}, fr);
$(this).data('bg-interval', interval)
}).mouseleave(function() {
clearInterval($(this).data('bg-interval'));
$(this).css('background-image', 'url(' + $(this).attr('data-placeholder') + ')').css('background-position-x', '0');
});
.filmstrip {
height: 64px;
border: 1px solid grey;
background-position: right;
background-position-y: inherit;
display: inline-block;
width: 64px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filmstrip" data-framerate="400" data-ticks="10" data-gifurl="//cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=bc7c2f3904bf">
</div>
U can use clearTimeout to stop setTimeOut.
Working Demo-
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
<p>Click the first button to alert "Hello" after waiting 3 seconds.</p>
<p>Click the second button to prevent the first function to execute. (You must click it before the 3 seconds are up.)</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the alert</button>
More-
Mozilla Developer Network
and
W3School
Related
Well it seems that I'm having some sort of a problem with Firefox, I've added a logo to my website and styled it through this CSS block:
#splash div.logo > a {
background-image: url("../../---.png");
background-size: 280px;
height: 85px;
width: 280px;
}
When I open the web page with Chrome or any other browser other than Firefox it displays it in the right way,unless I zoomed in it will show a thin line,
while opening the web page from Firefox will show a thin line above the image with or without zooming in.
The Logo is animated through this code:
IndexPage: {
Splash: {
init: function() {
var $splash = $('#splash'),
$logo = $splash.find('#logo'),
frame = 1,
frameCount = 46
framesPerSecond = 50;
function animateLogo() {
var lastTime = 0;
var currTime = new Date().getTime();
// var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var timeToCall = 25;
if (typeof requestAnimationFrame == "undefined")
requestAnimationFrame = function (callback, element) {
return setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
};
if (frame <= frameCount) {
setTimeout(function() {
requestAnimationFrame(animateLogo, $logo);
$logo.css('background-position', '0 -' + (frame * 85) + 'px');
frame += 1;
}, timeToCall);
// lastTime = currTime + timeToCall;
}
}
$('form.search').on({
close: function() { $splash.removeClass('searching'); },
open: function() { $splash.addClass('searching'); }
});
if ($window.width() >= 532) {
$window.scroll(function() {
var top = $window.scrollTop();
$splash.find('div.logo').css('opacity', top > 150 ? 0 : (150 - top) / 150);
});
}
$window.resize(function() {
if ($splash.width() < 768) {
$logo.css('background-position', '0 0');
} else {
$logo.css('background-position', '0 -3910px');
}
});
if ($window.width() >= 768)
animateLogo();
}
}
}
Any Ideas?
It looks like Firefox does some extrapolation of your image before rendering it (for perf I guess). It calculate the pixel to display using the neighbourhood of the one on your image, and some pixels on the top of your image are near black pixel resulting in a black/grey line.
EDIT: You can disable this behavior using image-rendering: optimizequality; in your CSS.
Snippet to test this:
var frame = 1,
frameCount = 46;
function animateLogo() {
$logo=$('.logo');
var lastTime = 0;
var currTime = new Date().getTime();
var timeToCall = 25;
if (typeof requestAnimationFrame == "undefined") {
requestAnimationFrame = function (callback, element) {
return setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
}
}
if (frame <= frameCount) {
setTimeout(function() {
requestAnimationFrame(animateLogo, $logo);
$logo.css('background-position', '0 -' + (frame * 85) + 'px');
frame += 1;
}, timeToCall);
}
}
.logo {
background-image: url('data:image/png;base64,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CAgICAgICAgICAgICAgICAgICAgICAgICAgIiDiIN841BAQEBAQEBMQrZlq6yX0TdyAgICAgICAqQbQFD4OAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiIJoICAgICAgnLEhIMaF+BcEBASEQywEBAQEBAQEBAQEBATEDhANBAQEBAQEBATEuBCW4hAQEBAQEBCBEMfHv9aPiD0QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBCvQbx9OggICAgICAiI0ine3pPASycICAgICAiIOhCXZQssCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIiASIn5SAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgMiKCD4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEPEQPzQ9BAQEBAQEBETRzEo39izwyulLKeI8MEIJJZRQQgklRlDiquBRk+glChFKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEs0kQ4mJEkFKvHd0cnRSQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgklmupnlgGhhBJKKKHEjku8y1DinRJKODo5TyihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoosVHiR6ePUCIBQgkllFBCCSWSl3hXvKnzuCsnCAgICAgIiEoQFwUP+wwBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAZEN8eH4uKkeEXsgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiI7YwLQQEBAQEBATEd+Zz6WZ2gZdOP2dAKKGEEkooocQYSpQtsIKXKHjUeyWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEKJUZeYZygxz1DipKDE6enfYpdom9rn5wwIJZRQQgkllBhDiZMMJU4ylJhnKDHPUKLJUKJRQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZSIU2Ir0x24RP0IJZRQQgkllMhe4mvpRraBl04QEBAQEBAQdSD6gkcdQUBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQGRAXGdAlGxefMRlBsR1BkTB9kFAQCREBB8ICAgICIgRIK4hgiCuICC2h+ghICAgHGIhsiOsYl0UQUBAQEBAQEBAHAgxT4C4ahIgXvrBhn+uBXGSAPHis6kWRJ8e0UBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBUhtjazCEgICAgICAgnp1p6QZGXmBBQEBAQEBAVIJoCx4GAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQExRkQDAbFfROyBgIB408kOAgICAgICAgICAgLClR0EBAQEBAQEBIS74hAQEBAQEBAQEBAQEBAQe0L8kgHReTpBQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA7BmxxTmDgICAgICAgHhmZqWbF/k7kEBAQEBAQEBUgih41AQCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAmLEiOADAQEBAQEBAbE/xKcMiBYCAgICAgICAmJciLnrCQgICAgICAgICAgICAgICAgIiLyIHgICAgICAgICYlwIS3EICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIiF0gtjpXGRDXSiihhBJKKKHE9qd4404CL50gICAgICAg6kBcFjxqCgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBARER8eH4uKkeEXwgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIJIitj7nEBAQEBAQEBAbMy3dsIvAK6dixGUGhBJKKKGEEkpUXGJe/X2dG8RJEUIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEKJvZU4Pv61/hKxp7BEeIQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihxIEQO5geAgICAgICAuLRfCndrLPASycICAgICAiIOhBXBY/6CAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQGRBfH+9PSkekTwgYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIBIixggILaHuLZjQ0BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQBwasaNpISAgICAgICDW5mPpJvWBV05HpYjIq0QllFBCCSWUGEOJkjXOl+glyhBKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSoUv85b//qb9E7DnKgFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQImWJJkOJRgkllFBCCSWUUEIJJZRQQgkllFBiWaLNUKJVQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBiBCV2Nt0eS9SPUEIJJZRQQonsJb6WblDkBRYEBAQEBAREHYi+/ptTEBAQEBAQEBAQEBAQELUPBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBMS+EFdKKKEEBAQEBAQEBAQEBAQEhGvsaIgBAgICAgLiJUSrBAQEBASEy1MICAgICAgICAgICAgI19gQEBAQENUifP0EBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAREBYhdTg8BAQEBAQEBcTuT4s0JvHKCgICAgICAqATRFTxsBgEBAQGxK0TsgYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgFhD9BAQ9gkICAgIiP0gLpSAgICAgICAgICAgICAODyihYCAgICAgICAgICAgICAgICAgICAgICAgICAgIDIgvBiPAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBATEC4gdTwsBAQEBAQEBcTPT0k2J/FPKICAgICAgICpBtE3tAwEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQHxOsTO5woCAgICAgICoinaiC740gkCAgICAgKiDsRl9TdsICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBeh9jLzCEgICAgICBGjph8/9134VdOEBAQEBAQEJUgzqq/YXODOM+AUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEKJEZbwdIqC6DIg+gyI6wyIAQICIt/RCQICIiEixQLQlZ0SSiihhBJKKKGEEkocBNFCQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQGwgOggICAgICAgIiHEhzjMgfIayEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJLxJ7mIgPiUgkllFBCCSWUeOt8+c57bmtYOkFAQEBAQEDUgbiq/oYNBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBER4RA8BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAbFnhFeKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIL6D2N9cQ0BAQEBAQIwX8e7Fd9rWsXKCgICAgICAqATRVX/D5gZxkQGhhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkrsC7HX6SAgICAgICBGijh6/t211SydICAgICAgICpB1LOxEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEPERRxkQ//R0goCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAuEOcQ0BAODpBQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEDkRex7ICAgICAgIEaJ2N9Ha4cDAQEBAQEBUQeir/6GDQQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBMQhEYMSEBAQEBDZER0EBAQEBAQEBAQExCEQLQQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAREToRPUIGAgICAgICAgKgV8VPdiB4CYtuIBgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiLJTyrf/7QQEBAQEBAQo0NMnnwfla2cICAgICAgICpB1P9tACEgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgqkDMlYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICIgzjI9BAQEBAQEBAjQ0w333x9SycICAgICAiIShAn1d+xgYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgNgCooWAgMiHOMuAOM+A6CAgIB4gLiAgICBc2UFAQEBAQEBAQEBsBdG6ngiC6JUIgji3Y0M4T0BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEC8GnGoaSEgICAgICDGhHj0duv8Hm4QEBAQEBAQdSDq/0arN4jLDAgllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgklnkZcZ0AMEBAQzhNKKKGEEkoooYQSSiihhBKpSvQQEBD5EM4TSiihhBJKKKGEEkoooYQSSiihRC6E+04Q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ICAgICAgICAgICAgICAgICB2gggzHQQEBAQEBERyhAUgBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQExE4QYaaDgICAgICASI6wAISAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDYCSLMdBAQEBAQEBDJERaAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEDtBhJkOAgICAgICIjnCAhACAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJiJ4gw00FAQEBAQEAkR1gAQkBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQOwEEWY6CAgICAgIiOQIC0AICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiInSDCTAcBAQEBAQGRHGEBCAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAbETRJjpICAgICAgIDIjpsPQVr92goCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC4n6F//JgWAuJViMX39ekzIG43v3bE4g/VI7oMiAHi8Iib/82ePH9Xhmie/O5ptSFmGRDTx/tDjYgJRBjE8AJideyaPvW4KIjFL99qzG7/elFmunYqaZf/KpLiOcT09jC1+OUOMV1b565+Gxlxt3MsgtwhZssz+vK7goZH3J/87veJyWqZO60WMV0tc2e1IBZPpNsn1S1isa4a7oCLXT8+4m6X7u4Rw+1fDPeH2lno88QCMbn9aK8j7h92u9NPQp+x1xHtErF2uJoEOrq+jLh9Yg3NCtEtfz+J9tMenlrF3n/M7z7k07WTxbe9JDpisRO8hJhUgBhWiJuP+XT1FFoeUStA3F5j3x18hn62fAqtEM0CEXfHvl9WrK3ymk1EXwGieQ7R3yOaaK9pvHAHcLZcbU/X8twh+tCIdoWYLu/f3CKW06/xYiLW74pPVtdxm4hQihden3geMfmhn1Gw+1XsQ0TzNKIZYl9jF5W4vUDqakA82rEf7ASz0DcKmgeH2GcRC0UliP5ZxDOvAoRDPDxjbzx7qkDcrJCGtQXgxrNnVgPiZh3+1Cp27V92VSCeuJ5YzaQGxKMru41nTxWIm7944vK0NkT/4G7Hxi5QA+LxfaeNV/NqQDy+jXm/HGzvbv3VcHSarZ5Dy9uYt8fbG0RXy3li4674cPcsaxf/1XHG3nh9YrEeXCzPF/+bVrAA3Hy5a3p/FT4Zgr/IskJ0jxCTx4j41xNPvHp6/yLX5Ad/EODeEE+8jj1d3Ziq5Bp7+cdvvy5XHLMHr2NHvNtRMqv9INZP1fYJ7xAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBABEWGmhYCAgICAgEiG+D/PDx7oyy0cAgAAAABJRU5ErkJggg==');
background-size: 280px;
height: 85px;
width: 280px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo"></div>
<button onclick="frame=0;$('.logo').css('image-rendering','auto');animateLogo()">Without CSS property (default)</button>
<button onclick="frame=0;$('.logo').css('image-rendering','optimizeQuality');animateLogo()">With CSS property</button>
Old answer:
You can separate sprites on your image by a few transparent pixels (or of the color of what is behind your logo) so the effect would not be visible anymore.
Well, if all else fails, you could always attempt to place a div over the thin line. Also try adding a border attribute to your code and set it to 0px solid whatever your background-color is. If all of these don't work, then try adding another border over the red line.
Try loading the image as is in the browser and check if the line is still placed. Also, in Firefox, right-click, choose inspect and see where it points to. For example, the line might be coming from div or some other html element.
i think creating an empty 'content' and using a background to show the image: works nicely in Chrome, Firefox, Safari and IE8+9
.googlePic:before {
content: '';
background: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
you could try if this would fix the issue
I think it just renders the size of image or block incorrectly, I played on your website with the CSS and and it seems that if you change background size to
background-size: 279.8px auto;
it solves the issue.
UPDATE:
As an additional solution, you might wrap the logo in a div, give the div hidden overflow, and then lift the block with your image up to 1px. It will hide the line as well.
Try like this:
#match div.logo > a {
background-image: url("../../---.png");
background-size: 280px;
height: 85px;
width: 280px;
outline: 0;
}
I want to make a bar (#innerBar) to decrease 1% in width per second.
The loop doesn't seem to work. My bar drops from 100% to 0% in the blink of an eye.
function timer(){
var timer;
for(i=100;i>=0;i--){
timer = i.toString() + "%";
setTimeout(function({$('#innerBar').css("width", timer)}, ((100-i)*1000));
}
}
Note : #innerBar is a DIV with a css property (height:10px). ** + the width from timer(); **
As already said in the comments, you need to put it in the closure. Here's an example:
function timer() {
for (i = 100; i >= 0; i--) {
setTimeout(function(t) {
return function() {
var timer = t.toString() + "%";
$('#innerBar').css("width", timer);
};
}(i), ((100 - i) * 1000));
}
}
timer();
#innerBar {height: 50px; background: green; transition: width 0.2s linear}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="innerBar"></div>
EXPLANATION
So my question are: what is going throught function(t)? and why and how does }(i) work? Is it a multiplication of the fu?
Let's take the function body we're passing in to setTimeout:
function(t) {
return function() {
var timer = t.toString() + "%";
$('#innerBar').css("width", timer);
};
}(i)
Let's omit the inside part:
function(t) {
// do some stuff with t
}(i)
Looks familiar? It's like the function body is called right away and is called an IIFE, just like, say:
(function(a, b) {
return a + b;
})(2, 3) // returns 5
So back to the original function, it accepts one parameter, t, and when we're calling the function we're passing in the iterator i as an argument (so the value of i becomes t inside the function). As I said in the comment, this is necessary in order to "fetch" the current value of i instead of getting the post-loop value.
As #Shomz already posted. That is good solution. I simply want to add my solution because it does not create 100 functions. So it's slightly lighter on the memory. Also you don't have to look through the DOM for #innerBar over and over again. And I removed jQuery as a dependency.
var size = 100;
var bar = document.getElementById( "innerBar" );
function setSize() {
bar.style.width = size-- + "%";
if ( size > 0 ) setTimeout( setSize, 1000 );
}
setSize();
#innerBar {
width: 100%;
height: 50px;
background: green;
transition: width 0.2s linear;
}
<div id="innerBar"></div>
I think the following code does what you want. the input time should be 1000, which will decrease you width by 1% every second
var width = $('#innerBar').width();
function timeLoop(time){
width = width*0.99;
$('#innerBar').css("width", width);
if (width <= 0.01){
return;
}
else {
setTimeout(function() {
timeLoop(time);
}, time);
}
}
I am having a view problems with animating a background to give the impression that a window is opening, I have the animation actually animating but it just animates like the images are in sequence. What I am wanting is to give the impression of a movie or animated gif.
You can see my current attempt here,
http://jsfiddle.net/8nj4934w/
I have so far done the following javascript,
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setInterval(function() {
self.animate({ 'background-position-y': '-=500px' });
}, 300);
}).bind('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
and the kind of effect I am going for here,
http://www.jeld-wen.com/catalog/exterior-doors
just hover of a door image.
Update (for jQuery solution handling two way sliding)
function slide(that, increment, limit){
var self = $(that);
that.iid && clearInterval( that.iid );
that.pos = that.pos || 0;
return setInterval(function () {
that.pos = that.pos += increment;
if (that.pos === limit){
clearInterval(that.iid);
} else {
self.css({
'background-position': '0 '+ that.pos + 'px'
});
}
}, 50);
}
$('a').bind('mouseenter', function () {
this.iid = slide( this, -500, -11500 );
}).bind('mouseleave', function () {
this.iid = slide(this, 500, 0);
});
Demo at http://jsfiddle.net/g8cypadx/
Original answer
I would suggest that you use CSS transitions with steps.
a {
background-image: url('https://dl.dropboxusercontent.com/u/58586640/9100_FRONT_STRIP.png');
background-repeat: no-repeat;
height: 500px;
width: 500px;
display: block;
background-position: 0 0;
transition: background-position 1s steps(23);
}
a:hover {
background-position: 0 -11500px; /* number of steps times the height */
}
If you have to do it through jQuery then you should animate both properties but with 0 duration for the animation, and small delay for the interval
$('a').bind('mouseenter', function () {
var self = $(this);
this.iid = setInterval(function () {
self.animate({
'background-position': '-=0 -=500px'
}, 0);
}, 50);
}).bind('mouseleave', function () {
this.iid && clearInterval(this.iid);
});
Demo at http://jsfiddle.net/8nj4934w/2/
(the problem with this solution is that it will not stop at the end)
I've some basic script to scroll a text to the right and left which I tried to convert it from timeout to requestAnimationFrame, however, I can't make it work.
function slideHorizontal(e, amount, time) {
var waitTime = 500;
e.animate({
marginRight: '-'+amount+'px'
}, time, 'linear', function() {
setTimeout(function() {
e.animate({
marginRight: 0
}, time , 'linear', function() {
setTimeout(function() {
slideHorizontal(e, amount, time);
}, waitTime);
});
}, waitTime);
});
}
any suggestion how I can apply the wait time with requestFrameAnimation? BTW, should I even use jQuery.animate() if I'm going to use the requestFrameAnimation?
No, requestAnimationFrame() does not make any sense when you use jQuery's animate(). jQuery may use requestAnimationFrame() internally though.
You can use requestAnimationFrame() to replace setTimeout() when you run the main animation loop with setTimeout(f, x). Instead of having a animation frame every x ms, requestAnimationFrame() lets the browser control the frame rate. The actual rate will then be based on whatever the browser deems necessary for a smooth animation, depending on the hardware and other factors. The browser can also lower the refresh rate when the window/tab is not visible, to conserve CPU time and reduce power usage of animations that are not visible.
But that's not what you are using setTimeout() for. You use it to wait between two animations. There are more elegant ways of doing this, but requestAnimationFrame() isn't one of them.
here's how you would use requestAnimationFrame:
var i = 0;
var forward = true;
function draw() {
requestAnimationFrame(draw);
if(i < 100 && forward){
i+=2;
}
else if(i > 0){
forward = false;
i-=2;
}
else{i = 0; forward = true;}
document.getElementById("div").style.left = i + "px";
}
draw();
div {
width: 80px;
height: 80px;
background: black;
position: absolute;
}
<div id="div"></div>
The setInterval equivalent would be:
var i = 0;
var forward = true;
function draw() {
setInterval(function(){
if(i < 100 && forward){
i+=2;
}
else if(i > 0){
forward = false;
i-=2;
}
else{i = 0; forward = true;}
document.getElementById("div").style.left = i + "px";},10);
}
draw();
div {
width: 80px;
height: 80px;
background: black;
position: absolute;
}
<div id="div" onload="draw"></div>
I'm trying to increment the width of a div every half a second. It should continue to expand as long as it is less than 100% wide. However, it is stopping at 10%:
JSFIDDLE
$('.button').click(function(){
var progress = setInterval(function(){
if( $(".bar").css('width') < '100%') {
$('.bar').animate({ width: '+=10%' });
} else {
clearInterval(progress);
}
}, 500)
});
Would anyone know why?
Try this, simply compares bar to it's parent width:
$('.button').click(function () {
var $bar = $(".bar"),
parentW = $bar.parent().width();
var progress = setInterval(function () {
if ($bar.width() < parentW) {
$bar.animate({
width: '+=10%'
});
} else {
clearInterval(progress);
}
}, 500)
});
The problem with approach you had is css('width') returns string width including px and comparing that to string 100% wasn't working .
Easy check to see what it looks like:
console.log($bar.css('width'))
Note that jQuery.width() returns numerical value of pixel width
DEMO
Why are you playing with % of width. Just make it simple.
For example :
increase the width by 10px each time while width is less than 100.
$('.button').click(function(){
var progress = setInterval(function(){
var width=$(".bar").width();
if( width < 100) {
$('.bar').animate({ width: width + 10 });
} else {
clearInterval(progress);
}
}, 500)
});
Check fiddle here