JS: Animate function - javascript

I have the element .menu on my page, and one of my JS libraries has xslide attribute, which gives many options like draggable, overlay, radius etc.
$(document).ready(function(){
$('.menu').xslide({
draggable: true,
overlay: 'rgba(255,30,100,1)',
radius:0
});
});
The code above sets the properties in a fixed way, but I like to give them some smooth transition, so how do I use .animate thing by jQuery here? e.g I want radius to grow gradually into 20 in a few seconds when .menu clicked. So I believe my code should start like:
$('.menu').click(function(){
Now what? When I try something like:
$(this).animate.xslide({radius:'20'},1000)
It does not work, can you help me? :) I'm sorry if I'm being annoying by asking these trivial things but I'm so new to it and I'm trying very hard. ^^

jQuery animate uses CSS styles to animate. If the plugin has an extension to animate radius, it is possible, otherwise animate will not work. Is the radius a CSS property?
If it would be a border-radius it will be something like:
$("#selector").animate({
"border-radius" : "10px"
}, 500); // 500 MS

Related

jQuery hover scale from bottom

This is certainly going to be an easy one but I can't get my head around what I am doing wrong...
I am trying to do a hover effect on a UL that affects a link within one of the UL LI's.
My current code looks like this:
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
});
$("ul.punchlines").mouseleave(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});
This technically works as it gives the effect that the base of the element to be scaled remains in place and scales up from the bottom however it does it in two stages, I am trying to get this effect to happen all in one motion so it is a seamless scale and move.
I can do this easily with basic CSS3 transitions but as it is not supported in IE9 I am trying to use jQuery to allow for maximum browser support.
Can anyone offer a little support firstly about how I get the animation to happen in one motion (not staggered) and secondly if this is the right approach? I am new to jquery and only just getting my hands dirty with it :-)
Please see JQuery hover api:
http://api.jquery.com/hover/
also make sure that your "li" have absolute position.
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
}, function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});

Jquery not resizing image on slider

The problem is that I have an image larger than 477 x 205, but i'll need them for another things, it would be a problem to make 2 or 3 images with diferent sizes. So, I decided to resize it on jquery. The major problem is that i'm new on JQUERY ( please, be patient :B ).
I've read some of the topics, but none helped me, the one that got closer was to add "$('#slides').css('background-size', '477px 205px');":
$(document).ready(function() {
$('#slides').coinslider({ hoverPause: true });
$('#slides').css('background-size', '477px 205px');
$('#slides').css('overflow', 'hidden');
});
but, that didn't solve it, also, it starts at the right size, but when the slider starts looping, it gets a mess again
Change this:
$('#slides').css('background-size', '477px 205px');
To this:
$('#slides').width(477).height(205);
The overflow: hidden will hide the rest of the image.
More relevant code would be helpful in providing better guidance. Have you considered "background-size: cover" yet?
Reference 1,
Reference 2
After 1 week without the solution, i've reached on what I was making mistakes, i was o the .js, when the Js loads, he create his own CSS for the slider, so I had to add the "background-size: size" on it like this:
// positioning squares
$("#cs-"+el.id+i+j).css({
'background-position': -sLeft +'px '+(-sTop+'px'),
'left' : sLeft ,
'top': sTop,
'background-size':'477px 205px'
});
as it wasn't fixed a size to it, it would take the real size of the image as default.
Thank you for trying to help me with this issue!

Animate div position in jQuery

I’m learning to use jQuery, I’m not an expert programmer. I’m using animate effect to build a horizontal navigation for the loop of WP installation (no scrolls). I animate 960px in x axis the loop with a “Next Page” button and go to start going (to 0px x position) with a “start” button. The container of this has an overflow:hidden CSS property in order to hide the posts outside the container.
Please see a live example.
I don’t know how to stop the slide effect when reaching the end of the loop div. Maybe with a conditional statement, but I don’t know to approach this.
This is the script:
<script type="text/javascript">
$(document).ready(function(){
$(".left-slide").click(function(){
$("#slide-container").animate({
left:"-=960"
}, 1500 );
});
$(".right-slide").click(function(){
$("#slide-container").animate({
left:"0"
}, 1500 );
});
});
</script>
Would something like this work?
if($("#slide-container").css('left') > -($("#slide-container").width()))
{
}

Strips Menu With JQuery

First of all, I am not an advanced JQuery developer, however, I have been creating what I call Strips Menu with JQuery, you can see it here by clicking the Preview link on top:
http://jsbin.com/uwopu3/edit
When I click on a strip, it promptly shows the contents relevant to hovered strip but I need sliding effect something that has been done on this site:
http://jeemsolutions.com/
I tried giving the animate function a time of 1500, but still no sliding effect.
How do I give it sliding effect like that of jeemsolutions for which the link is provided above.
Thank You
You are using the animate function wrong. It takes the CSS properties you want to animate to as arguments, so try something like:
var w = $('#slide').width() - $('.bar').size() * $('.bar').width() + 10;
$(this).css('text-indent', '0px');
$(this).animate( {width: w}, 500);
I know this might sound wrong, but why don't you simply use jQuery Accordions? It does what you need, and is supported against different browsers and all that.
Cheers

jQuery animate problems

I use the following snippet to make an element's background lightblue, then slowly fade to whiite over 30 seconds:
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "white" }, 30000);
Two questions.
First, instead of fading to white, is there a way to fade opacity to 100%? That way I don't have to change "white" if I choose to change the page's background color?
Second, about once out of every 10 or 15 times, the background stays lightblue and fails to fade to white. I'm using the latest versions of jQuery and the UI core. What could be going wrong?
EDIT: Bounty is for a solution to problem regarding second question.
EDIT2:
Apparently I got downvoted into oblivion because I said I rolled my own solution but didn't show it. My bad. I didn't want to be self-promoting. My code works 100% of the time and doesn't require jQuery. A demonstration and the code can be found at:
http://prettycode.org/2009/07/30/fade-background-color-in-javascript/
For your second question: in my experience this is usually because a Javascript error has occurred somewhere else on the page. Once there is one Javascript exception, the rest of the page stops running Javascript. Try installing Firebug (if you haven't already), then open up the "Console" tab and enable it. Then any javascript errors or exceptions will be printed to the console.
Another thing to try (which kinda contradicts my last statement...) is to disable all your browser plug-ins to see if you can recreate. Sometimes they interfere with scripts on the page (particularly GreaseMonkey.)
If you could provide a sample HTML snippet which reproduces this animation problem it would be a lot easier for us to help you. In the script I have pasted below, I can click it all day, as fast or slow as I like, and it never fails to animate for me.
For the first question: I know you said you'd found a workaround, but the following works for me (even on IE6) so I thought I'd post it, since it may be different from what you were thinking. (Note that setting CSS "opacity" property through jQuery.css() works on IE, whereas IE does not support the "opacity" property directly in CSS.)
<html>
<head>
<style>
body { background-color: #08f; }
#test { background-color: white; width: 100px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var myOpacity = 0.125;
$(function(){
$('#test').css('opacity', myOpacity);
$('a').click(function(){
myOpacity = 1.0 - myOpacity;
$('#test').animate({ opacity: myOpacity });
return false;
});
});
</script>
</head>
<body>
<p>Click me</p>
<div id="test">Test</div>
</body></html>
Dont forget the color plugin.
See here
When the color fails to animate to blue you could try to use the callback function to log a message to the console. You can then check that the event actually fired and completed. If it does then you could potentially use two animates. The first one to animate to a halfway house color then the use the callback to animate to white (so you get two bites of the cherry, if the outer fails but completes the callback has a second go)
It would be good if you could try to recreate the issue or give a url of the issue itself.
e.g
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "#C0D9D9" }, 15000, function(){
$(this).animate({ backgroundColor: "#ffffff" }, 15000)
});
You could always use something like this, avoiding the JQuery animate method entirely.
setTimeout(function() { UpdateBackgroundColor(); }, 10);
UpdateBackgroundColor() {
// Get the element.
// Check it's current background color.
// Move it one step closer to desired goal.
if (!done) {
setTimeout(UpdateBackgroundColor, 10);
}
}
Also, you may be able to remove the "white" coding by reading the background color from the appropriate item (which may involve walking up the tree).
It is possible to have jQuery change the Opacity CSS property of an item (as mentioned in another answer), but there's two reasons why that wouldn't work for your scenario. Firstly, making something "100% opaque" is fully visible. If the item didn't have any other modifications to its opacity, the default opacity is 100%, and there would be no change, so I'm guessing you meant fading to 0% opacity, which would be disappearing. This would get rid of the light blue background, but also the text on top of it, which I don't think was your intent.
A potentially easy fix for your situation is to change the color word "white" to "transparent" in your original code listing. The color plugin may not recognize that color word (haven't checked documentation on that yet), but setting the background color to "transparent" will let whatever color behind it (page background, if nothing else) shine through, and will self-update if you change your page background.
I'll answer your first question.
You can animate opacity like this:
.animate({opacity: 1.0}, 3000)
I think you can try using fadeOut/fadeIn too..
What about:
$("#" + post.Id).fadeIn( "slow" );
You could possibly have two divs that occupy the same space (using position: absolute; and position: relative; setting the z-index on one higher to make sure one is above and the other is below. the top one would have a transparent background and the one below would have a background color. then just fadeout the one below.
As for the second question:
If you think the default animation classes from JQuery are not properly working you could try Bernie's Better Animation Class. I have some good experiences with that library.
Animate only works for numbers. See the jquery docs. You can do opacity but you can't do background color. You can use the color plug in. Background-color uses strings like 'red', 'blue', '#493054' etc... which are not numbers.

Categories