We Keep Coding

Animation not being made jquery (backgroundColor)

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

Javascript animation does not work in WordPress

I am trying to add some JavaScript code to my WordPress page that makes a blue circle move across the screen whenever the page is loaded (via the Raphael JS documentation). I copied and pasted the JS code into the "Text" section of my WordPress page but when I saved and previewed the page, not only did the ball not appear but all of the tags were deleted. Here is the source code I inserted:
<script src="raphael-min.js"></script>
<script>
window.onload = function() {
var p = Raphael(10, 10, 400,400);
var c = p.circle(100, 100, 45);
c.attr({
fill: 'blue',
cursor: 'pointer'
}).animate({
cx : 300
}, 5000);
}
</script>
Is there some standard way to use JavaScript in WordPress? All help is greatly appreciated. Thanks!

You must check your .js file path correctly,
- use phoenix editor extension in firefox to check your .js loaded or not
- make sure your .js file position in top position before </head

Image jQuery Sliding not working

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

Make Image Grow Larger On Press And Toggle

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);
}
});

jQuery qTip - link to a hidden div from inside a tooltip

I am trying to place a link inside a tooltip (qTip) that when clicked shows the content of a hidden div inside a lightbox (nyroModal). Regular anchor tag not in a tooltip links to the div opening content in a lightbox successfully.
Code: http://jsbin.com/omafe/2/
Might need to copy code to notepad, save as html and open the file. (jsbin not loading external js plugin files)
Any help would be greatly appreciated. Thanks.

It appears that qTip is storing a copy of 'div.tipcontent' in memory (a variable).
I discovered this by removing the class "hidden" from the div. When you do this, you'll see that you have two divs. One still on the page and another used by qTip from memory.
As a solution, you may have to modify qTip to apply $('a').nyroModal(); to the link nodes it renders from memory.
EDIT
To add the lightbox effect to your qtip links, modify your qtip initializer as follows:
$('div.tooltip').qtip({
content: $('div.tipcontent').html(),
position: {
corner: {
target: 'topRight',
tooltip: 'bottomRight'
}
},
style: {
width: 150,
padding: 10,
background: 'silver',
color: 'black',
tip: 'bottomMiddle',
},
hide: {
fixed: true
},
api: {
onShow: function() { $('a').nyroModal(); }
}
});
Please note the api call to onShow. This will re-apply the nyroModal to all the links on the page thus covering the dynamically generated content from qtip. There's probably a more efficient way to narrow down the jQuery selector to the specific link generated by qtip, but this should get you started at least.