Increment background-position-x using jQuery animate? - javascript

Is it possible to animate a DIVs background-position-x using jQuery animate?
Ideally, the background-position-x will increment 20% when clicked.
Here is my code so far:
$('.cycle').click(function() {
$(this).animate({ 'background-position-x': '+20%' }, 500, 'linear');
});
But it only works for the first click.
Thanks!

Try this
$('.cycle').on('click', function() {
$(this).animate({ 'background-position-x': '+=20%' }, 500, 'linear');
});

use something like this:
$(function() {
$('.element').css("backgroundPosition","0px 0px").animate({"backgroundPosition":"-200px 10px"});
});

Related

Set time for applying css in jquery

This is my js code. Actually I want to set time to apply this css. I tried using setTimeout but not working. How to do using setTimeout or anything else. Please help. Thank you
$(document).ready(function() {
$(".front").click(function() {
$(".flip-container").css({
"height": "0px"
});
});
});
Use setTimeout() as follows
$(document).ready(function() {
$(".front").click(function() {
setTimeout(function() {
$(".flip-container").css({
"height": "0px"
});
}, 1000);
});
});
you can also do it with some animation using animate() method
$(document).ready(function() {
$(".front").click(function() {
$(".flip-container").animate({
"height": "0px"
}, 1000);
});
});

jQuery Slideup and Fadein Effect at the same Time

I'm learning new stuff with jQuery here and I have seen a effect that I like link here
Meet my Team section. As you can see if you scroll down the circle slidesup and fades in at the same time. I tried to replicate that effect. Here's my jsfiddle
$(window).on("scroll", function() {
if ($(window).scrollTop() >= $('#thumbnails-cont').offset().top-$(window).height()) {
$("#thumbnails img").animate({opacity: 1, bottom: 0})
}
});
You have to work with the queue property to play animations simultaneously.
Working fiddle: Here
Basic code:
$(function() {
$(".thumbnail").animate({ opacity: 1 }, { duration: 1200, queue: false });
$(".thumbnail").animate({ "margin-top": "0px" }, { duration: 1200, queue: false });
});
Read this for more information about the animation function in jQuery.
I hope I could help you a bit :)

How to animate wthout stop with jQuery?

I'm trying to make a h1 move forward and backward slowly without stop on page load.
What I got now is this code:
$(document).ready(function() {
$("div#presentation-container h1").animate({
opacity:'1',
marginLeft:'+=600px',
}, 1300);
});
to make the h1 slide on start.
How to make it animate slowly forward and backwards without stop?
This should do it...
$(document).ready(function() {
function moveRight() {
$("div#presentation-container h1").animate({
opacity:'1',
marginLeft:'+=600px',
}, 1300, moveLeft);
}
function moveLeft() {
$("div#presentation-container h1").animate({
opacity:'1',
marginLeft:'-=600px',
}, 1300, moveRight);
}
moveRight();
});
$(document).ready(function() {
$("div#presentation-container h1").animate({
opacity:'1',
marginLeft:'+=600px',
}, 1300).animate({
opacity:'1',
marginLeft:'-=600px',
}, 1300);
});
You don't need jQuery for this:
<marquee behaviour="alternate" speed="1"><h1>Text here</h1></marquee>
Optionally add style="width:900px" or similar to adjust the width of the scrolling area.
That said, it's an extremely bad idea.

Make a DIV reveal upwards onClick

I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.
Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
​
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.
Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});

Javascript glow/pulsate effect to stop on click

I have the following Javascript to make a text link glow/pulsate continuously. This link reveals another section of the same page so I would like it to stop once the user has clicked on it.
<script type="text/javascript">
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({opacity: 0.2}, 1200, 'linear')
.animate({opacity: 1}, 1200, 'linear', pulsate);
}
pulsate();
});
</script>
So basically, I just need to know what I need to add here so that the effect stops once it has been clicked.
If the same link is clicked again, the revealed section of the page will hide - is it too much trouble to make the effect start again after a second click?
I look forward to an answer from you good people.
Scott.
Simply bind to the click event and call stop(). You should also ensure that the opacity has been restored to 1:
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear')
.animate({ opacity: 1 }, 1200, 'linear', pulsate)
.click(function() {
//Restore opacity to 1
$(this).animate({ opacity: 1 }, 1200, 'linear');
//Stop all animations
$(this).stop();
});
}
pulsate();
});
Here's a working jsFiddle.
The solution is pretty simple. Have your pulsate() function make sure that .pulsate doesn't have the class stop before doing its thing. If it does have that class, then the pulsate() function will simply animate the link back to full opacity, but not continue the pulsating.
James' example works as well, but I prefer my approach because his way binds the click event to .pulsate over and over again. This kind of thing may cause problems depending on what the rest of your page is doing.
Live example: http://jsfiddle.net/2f9ZU/
function pulsate() {
var pulser = $(".pulsate");
if(!pulser.hasClass('stop')){
pulser.animate({opacity: 0.2}, 1200, 'linear')
.animate({opacity: 1}, 1200, 'linear', pulsate);
}else{
pulser.animate({opacity:1},1200)
.removeClass('stop');
}
}
$(document).ready(function() {
pulsate();
$('a').click(function(){
$('.pulsate').addClass('stop');
});
});

Categories

Resources