I'm trying to make an image slidein on page load but it doesn't seem to work at all. The delay has no problem but the sliding effect doesn't do anything. Any help would be greatly appreciated.
$(function() {
$(".bgslide").one('load', function () {
$(this).delay(1000).show("slide", { direction: "left" }, 'linear', 2000);
}).each(function() {
if(this.complete) jQuery(this).load();
});
});
Here is a link to a jsfiddle as well: http://jsfiddle.net/cDYvh/
The slide effect comes with jQuery UI which you didn't include: http://jsfiddle.net/cDYvh/1/
You could also use $.animate() to avoid including jQuery UI. For example, you could accomplish your example with something like this:
$(this).animate({ left: 2000px });
Note: You'll probably need to apply position:absolute to the elements. Other items can be animated as well, including color, opacity, etc.
Animate Example
Related
I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation
I'm using jQuery code to animate a div from left to right on load, and then by clicking the close button the div hides from right to left. It's working fine, it's just not going left to right horizontally but diagonally. What am I doing wrong? Here's an example of the code I'm using http://jsfiddle.net/N8NpE/2/
$(function(){
$("#content-box").hide(0).delay(0).show(500);
});
$(function(){
$("#ClosePanel").click(function () {
$("#content-box").hide("slow");
});
});
Any help will be greatly appreciated.
You could try using .animate() instead of .hide() and .show(). This will give you a little more control over everything.
$("#content-box").animate({'width': 240},500);
And to close, include a callback function to set display to none after the animation:
$("#content-box").animate({'width': 0},500,function(){
$("#content-box").css('display','none');
});
http://jsfiddle.net/N8NpE/6/
You should include jQuery UI in your script and change your function a little bit:
$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
direction: 'left'
}, 1000);
});
Here is an updated jsfiddle: http://jsfiddle.net/N8NpE/4/
$('#content-box').animate({width: 'toggle'});
http://jsfiddle.net/U7wGt/
On a website, I have a list of news articles mentioning a certain thing. I want the articles to be able to be pressed, and when they are, the image source will switch with the image source of the actual article, and the image will grow to an arbitrary size. When you click the image again, it should go back to normal. I also want it to set itself to be absolutely positioned or something that way it doesn't push elements out of its way when it grows.
I guess my first question would be, is there already a code snippet or easy implementation of this or something similar? I have not been able to find one.
Second, I am in the process of making my own, and for whatever reason, when the page loads, every image just fades to disappearing without anything being pressed. Here is my code so far...
$(".newsCover").toggle(function () {
$(this).animate({
width: "auto",
height: "1000px"
}, 1500);
}, function () {
$(this).animate({
width: "auto",
height: "300px"
}, 1500);
});
Can anyone tell me what is wrong with it and how to fix it? I have a feeling its just something really stupid...
Thanks so much!
The .animate() method allows us to create animation effects on any
numeric CSS property.
All animated properties should be animated to a single numeric value, except as noted below;
http://api.jquery.com/animate/
However, you can hack it by determining the auto height/width as a hard number:
JavaScript jQuery Animate to Auto Height
The toggle function that you are using was deprecated in 1.8, and removed in 1.9, see here: http://api.jquery.com/toggle-event/ In v 1.9+, the toggle function now simply hides the element.
With no parameters, the .toggle() method simply toggles the visibility
of elements
The parameters that can be passed to the new toggle function can be found here: http://api.jquery.com/toggle/ With the new toggle function, you are unable to run the .animate() function within it. To achieve what you're trying to do, you could do something like:
$(".newsCover").click(function() {
if($(this).height() > 300) {
$(this).animate({
width: "auto",
height: "1000px"
}, 1500);
}
else {
$(this).animate({
width: "auto",
height: "300px"
}, 1500);
}
});
hi i am playing with jquery ui effects and trying to animate some christmas ornaments. the idea is that they would swing if you hover over them. and swing from the midpoint of the top of the image (the top of the string) like a real ornament and not just the whole image moving back and forth.
what i have so far is here:
http://jsfiddle.net/9ceeW/
its displaying on click, when i do it on hover they dont work as well or realistically.
this is my first foray into jquery animation and i am not really sure how to proceed next. any help would really be appreciated.
thanks!
You can use the plugin from
http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html
add a custom animation queue as in A non-nested animation sequence in jQuery?
and you end up with animated christmas balls at http://jsfiddle.net/gaby/9ceeW/8/
update
updated to allow multiple balls to animate at the same time.. http://jsfiddle.net/gaby/9ceeW/9/
Check out the jQuery Path plugin for animating elements along curves. See the author's demo page.
Not really my thing, but you need to add something like this:
$('#ball1').click(function () {
$(this).effect("bounce", { direction:'left', times:1, distance:60 }, 500);
$(this).effect("bounce", { direction:'left', times:1, distance:30 }, 750);
$(this).effect("bounce", { direction:'left', times:1, distance:15 }, 1000);
$(this).effect("bounce", { direction:'left', times:1, distance:5 }, 1250);
});
Updated fiddle: http://jsfiddle.net/N7qM9/
I have a little jQuery animation which fades in a link when hovering an :
$(function() {
$('.delete').hide();
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').fadeIn('fast');
}, function() {
$(this).parents('li').children('.delete').fadeOut('fast');
});
});
But if I quickly move my mouse in and out of the image, the new animation is always added to the queue and when I stop I can see the link pulsating for a while. I tried using .stop(true), but then sometimes the fade in effect doesn't work at all (or just up to some opacity value less than 1). What can I do?
Thanks, Eric
The best way is to use hoverIntent plugin. This deals with the issues above. It also adds a slight delay to the animation so if a user happens to quickly move the mouse over all the links you do not get an ugly animation flow of all the links.
One way to prevent such problems occuring is to use stop() in conjunction with fadeTo(), as in the snippet below:
$(function() {
$('.delete').fadeTo(0, 0);
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 1);
}, function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 0);
});
});
Hope this solves your issue!