I am working on a project where I am assigned a task to make a blink image moving on the web page from the left to the right.
The image should move(step up) and blink each second.
I know how to make it blink, my code is below:
function blink(time, interval){
var timer = window.setInterval(function(){
$("#img").css("opacity", "0.1");
window.setTimeout(function(){
$("#img").css("opacity", "1");
}, 100);
}, interval);
window.setTimeout(function(){clearInterval(timer);}, time);
}
blink(5000, 1000);
But I don't know how to move it on a second basis and at the same time blink it.
Please, help me guys!
Thanks
how about using jquery animate?
$("#img").animate({marginLeft:'500px'},1000);
Here's a demo that is using only the power of the animate function :
http://jsfiddle.net/vtZd5/
try this:
function blink() {
$('div').fadeTo(1000, 0.1, function(){
$(this).animate({opacity: '1', top: '+=20px'}, 500);
blink()
})
}
blink()
http://jsfiddle.net/AJSk3/3/
Related
I am working to make a slider that moves continuously while the users mouse is positioned over the arrow. It works but it keeps moving even when the content has ended.
How can I make it stop so that the forward/back motion is disabled once all the slides have been viewed, or so that they can't go backwards when they are viewing the first slide?
My code is below - open to other methods to achieve this type of slider if what I have is bad.
$(document).ready(function() {
var timer;
$("#leftarrow").hover(function() {
timer = setInterval(function() {slideLeft();}, 50);
}, function() {
clearInterval(timer);
});
$("#rightarrow").hover(function() {
timer = setInterval(function() {slideRight();}, 50);
}, function() {
clearInterval(timer);
});
function slideLeft() {
$("img#background").stop().animate({
'left': '-=200px'
}, 50);
$(".mid").stop().animate({
'left': '-=20px'
}, 50);
console.log('alert');
}
function slideRight() {
$("img#background").stop().animate({
'left': '-=200px'
}, 50);
$(".mid").stop().animate({
'left': '+=20px'
}, 50);
}
});
Here is a fiddle with my slider: http://jsfiddle.net/rYYDv/
You can use an additional if:
For slide left:
if(($(".mid").position().left) >= -500){ .. }
For slide right:
if(($(".mid").position().left) <= -10){ .. }
Disadvantage: You have to take care of the correct values manually. Which is not a problem, if the pictures don't change very often.
You should probably also add an additional else to ensure a correct final position (for the animate left property). But i think you get the idea.
http://jsfiddle.net/rYYDv/2/
I do not have enough points to comment on this post; hence, I'm writing it down here -
Similar post: How to make the Animate jQuery method stop at end of div?
I have a gif image that I want to stretch by making the height and/or width variable. However, I want the image stretching to be done at a speed I set, so it is progressive and visible as it occurs on the screen. The code below works, but it renders the image immediately as a complete image, with no stretching visible. So I thought: insert some kind of timer function to slow down the execution of the "stretching" code. I have tried setTimeout and setInterval (using 1/100 sec delays), but I have not been able to make either work. What am I doing wrong here guys?
$(window).load(function(){
setInterval(function(){
var i=1;
for (i;i<400;i++) {
$("#shape1").html('<img src="image.gif" width="'+i+'" height="40">');
}
},10);
});
The problems with your code are that
at each interval iteration, you repeat the whole for loop
you never stop the interval looping
You may fix your existing code like this :
var i=1;
function step() {
$("#shape1").html('<img src="image.gif" width="'+i+'" height="40">');
if (i++<400) setTimeout(step, 10);
}
step();
Instead of replacing the #shape1 content each time, you could also simply change the width :
var i=1;
var $img = $('<img src="image.gif" width=1 height="40">').appendTo('#shape1');
function step() {
$img.css('width', i);
if (i++<400) setTimeout(step, 10);
}
step();
Demonstration
But jQuery has a very convenient animate function just for this kind of things.
As Dystroy suggested. Use jQuery animate instead
setInterval(function(){
var i=1;
for (i;i<400;i++) {
$("#shape1").animate({
width : i
},10);
}
}, 10);
Here is a jsfiddle
CSS3 transitions are great if your browser supports it.
.resize {
width: 200px;
height: 50px;
transition: width 1s ease;
}
Just add the class to an element to make it stretch out.
img.className = "resize";
css demo
I have a page that does infinite scrolling and I wanted to do some performance testing on it by scrolling endlessly to the bottom of the page.
Is there a jQuery/javascript command that allows me to scroll continously on a page non-stop?
I tried doing the following:
for (var i=0;i<100;i++)
{
setTimeout(window.scrollTo(0,document.body.scrollHeight), i * 10000);
}
basically I wanted to call window.scrollTo .. after delayed for 5 seconds, and then calling it again.. infinitely. However the solution above doesn't work. I don't care about this being hacky, I just needed something to work for testing.
Here is a simple fiddle:
CSS:
body{
height:400px;
overflow-y:scroll;
}
JS:
var body = $('body');
setInterval(function(){
var pos = div.scrollTop();
div.scrollTop(pos + n); // you can have your offset
}, 200);
You can do like this
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
Im trying to make my tooltip bounce onmouse hover,
I have the following that works with sporadic results, as in the the tooltip bounces fast for 3 seconrds ro so, then slow for 3 seconds etc... I also need to stop this function on mouseout, Can somebody see where im going wrong to get the variation in bounce speed?
// Tooltip title
$('.male').mouseover(function(e) {
var tiptitle = $(this).find('.highlight');
setInterval(function(){
tiptitle.animate({top:'-85px'}, 100, function() {
tiptitle.animate({top:'-75px'}, 100);
});
},200);
}).mouseout(function() {
});
if you choose to go the route of the effects plugin bounce effect use this code , then use stop() on mouseout
$('.male').mouseover(function(e) {
var tiptitle = $(this).find('.highlight');
tiptitle.effect("bounce", { times:3 }, 300);
}).mouseout(function() {
$(this).find('.highlight').stop();
});
otherwise , I believe you are getting sporadic speeds of bounce because of -85px and -75px both at 100
I am newbie in JS. Right now i am working on an effect in which i want when page scroll first time then the natural motion animation starts but it's creating a problem because when i scroll the element animation became fast.
Check this more you got the idea.
http://jsfiddle.net/byvLy/
i know that this is a swinging box (figured it out due to the Math.sin())
however, you have to note that scrolling event is fired every few milliseconds during scrolling. in your code, you are calling animate and creating an interval every time the scroll event is fired. that's why your animation is jumpy;
try this instead:
$(function() {
$(window).on('scroll', function() {
swing.start('.cloud1, .cloud2');
});
var swing = (function() {
var animated = false;
function startAnimation(selector) {
if (!animated) {
var banner = $(selector);
var start = 0;
animated = true;
window.setInterval(function() {
banner.css('left', 100 * Math.sin(start) + 80);
start += 0.1;
}, 30);
}
}
return {
start: startAnimation
}
}());
});