Jquery fade background on hover? - javascript

There is a link, with no background, and a css rule, which changes background on hover.
Parent bg is white, link on hover - blue.
How can I do a hover effect slowly, from white to blue?
Thanks.
li a {}
li a:hover { background: blue; }

jQuery('a#theLink').hover(function(){
$(this).stop().animate({backgroundColor: 'blue'});
}, function() {
$(this).stop().animate({backgroundColor: 'white'});
});
For this to work you need to download the "color plugin" for jQuery.

You don't need an extra color plugin. You just need jQuery UI on top of jQuery, which lets you do animations also on color. (Or if you don't want to use jQuery UI for some reason, I guess another plugin will do the trick. But I have successfully tried this with just including jQuery core and jQuery UI.)
Animation itself goes something like...
$("li").hover(function() {
$(this).animate({
backgroundColor: "#ffffff"
}, 'slow');
});

bgFade a very great and simple plugin that animates de background image:
http://www.isthatclear.com/jquery/bgFade/

In order to animate colors, you need the color plugin

You'll need to use a plugin as JQuery can't animate colours out of the box.
Try the Colour Animation plugin
Then it'll be something like:
$(this).animate({ backgroundColor: "blue" }, 'slow');

Related

Animating the color of document's body using jQuery not working

I'm trying to animate the color of the body of the page using jQuery:
Here is the code I've tried but it doesn't work and nothing changes at all?!
$(document.body).animate({ backgroundColor: '#32a852' }, 1500);
Am I missing something?
I tried to just change the body like this and it works fine:
$(document.body).css("background-color", "yellow");
Quoting from https://api.jquery.com/animate/ :
"All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used)."
So seems like you need to use JQuery.Color plugin.
This works, I dont know what you are doing wrong
try this
$("body").animate({ backgroundColor: '#32a852' }, 1500);

Apply CSS to disabled button

I want to view disabled button as:
The one marked with red is a disabled button and the green one is enabled.
I am trying to apply CSS to do the same as follows:
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").css({ 'background': "#grey" });
});
But its not showing up as mentioned in the image.
Its looking for me like this:
Which CSS attribute do I need to use for disabled buttons as above (marked in red)?
JSFIDDLE:
http://jsfiddle.net/54qJx/
Try out with prop()
$(document).ready(function () {
$('#btnSearch').prop("disabled", true);
$("#btnSearch").css({ 'background': "gray" });
});
#BearGrylls
Check this updated fiddle demo, its working as per your requirement.
css function should be like this to work.
$(document).ready(function () {
$('#btnSearch').prop("disabled", true);
$("#btnSearch").css('background-color','grey');
});
You can also use attr, but I prefer prop
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").css('background-color','#ccc');
});
you can simply disable a button by this
$('#btnSearch').prop('disabled', true);
also change the background color with
$('#btnSearch').css('background-color', 'gray');
check the .css() API for usage.
btw when using color name like gray, you don't need to put a '#' ahead of the name, that's why your setting of background color doesn't work.
You can use opacity css for graying out disabled button :
$('#btnSearch').prop('disabled',true).css('opacity','0.5');
Working Demo
You can use the CSS3 :disabled selector, if you want to style it with CSS instead of Javascript:
#btnSearch:disabled {
background-color: grey !important;
}
edit:
Your problem is, that your button is styled with an inline style-tag. It's generally a bad idea to use these, as it makes maintaining larger pages a nightmare. Read this article for more information: Best Practices: Avoid Inline Styles for CSS.
See this fiddle for an example of how to do it anyways. What I'm doing here is using this trick to override the inline style properties.
Setting the background color won't grey won't make the button look like the two you have circled, as it looks like there is more CSS at work then simply setting the background to grey.
you can use
$("#btnSearch").css({ "element": "new value" });
But you might need to call it 4 or 5 times to get the desired effect with different elements.
Otherwise you can use
$("#btnSearch").addClass("disabled")
where disabled is a CSS class you've created with the correct styling (background grey, text colour darker etc). At a guess the two red circled buttons have had a class added to them to make them look disabled, so you can just add that class to the button you want to disable.
if you want to use "#" with color. than you must use color HEX value not the name
Error in line $("#btnSearch").css({ 'background': "#gray" });
Try this
Your Button
<button id="btnSearch" onclick="TeacherData_OnSearch()" style="background-color: #249FDA; color: white; height: 22px; width: 45px; border-radius: 4px;">Search</button>
Script
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$('#btnSearch').css("background-color", '');
$("#btnSearch").css({
'background-color': "grey"
});
})
DEMO
set a css class
.bg1 {background:#ddd}
then add it on button
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").addClass("bg1");
});

jquery animate the page background-color on page load

I'm attempting to just change the background colour of a webpage upon page load. I see no reason why this shouldn't work, "body" is the correct element I wish to manipulate. I am using http://docs.jquery.com/UI/Effects/animate as a reference.
$(document).ready(function(){
$("body").animate({ backgroundColor: "#000000" }, 1000);
});
Working demo http://jsfiddle.net/aqrvA/8/
Add Jquery ui library as well please Rest will work like a rocket! < Your code is fine >
Jquery UI link: http://jqueryui.com/
Hope this helps, :)
Script:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
code
$(document).ready(function(){
$("html body").animate({ backgroundColor: "#000000" }, 1000);
});​
You can't animate colors using only jQuery. You must use jQuery UI, that extends the animations to colors. Look here :)
"The jQuery UI effects core extends the animate function to be able to
animate colors as well. These transitions can animate the background
and border colors and accept colors specified in hex, rgb and color
names."
You will not be able to use animate function until you load jquery-ui.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js
This is what you need.

Jquery / Javascript Submenu Color Hover

I have another problem in a jquery dropdown menu.
In my example (link in the bottom) I want that when I hover the 3ºlevel Submenu the text color of the current submenu item stays in hover state (color yellow in example).
Link To Live Example with complete Code
I have comments in the code to explain where is the problem.
Thanks
I updated your fiddle here to fix the problem.
I shifted the hover from ul.submenu li a to just be ul.submenu li so that when its submenu2 was hovered over it didn't call the unhover function. I then applied the styles in the functions to the .children('a') tags, like so:
$('ul.submenu li').hover(function() {
$(this).children('a').css({
color: '#eff803'
});
$(this).find(".submenu li:first a").stop().animate({
backgroundColor: '#0d0167'
});
}, function() {
$(this).children('a').css({
color: '#ffffff'
});
$(this).find(".submenu li:first a").stop().animate({
backgroundColor: '#0000FF'
});
});
for a start, avoid css() where you can. you're better off using addClass() and removeClass(). define a hover class that contains the colours you want then (assuming your menu is not inside another <ol> or <ul>) use something like
$('.menu a').hover(function() {
var $path = $(this).parents('li').find('> a').not(this);
$(this).closest('.menu').find('a').not($path).removeClass('hover');
$path.addClass('hover');
//code that animates to the colours in your hover class
$(this).addClass('hover').css('');//make it stick
});
edit: sorry didn't think about the fading in of styles

fadeIn and Out effect on hover with jQuery

I'm currently using a hover effect using jQueryUI like this:
$('#menu-header-menu li a').hover(
function() {
$(this).animate({ backgroundColor: '#eaeaea'}, 500);
},
function() {
$(this).animate({ backgroundColor: '#fff'}, 500);
}
);
But I feel that including both jQuery and jQueryUI libraries to accomplish this isn't necessary. Is there any smart way to do this using fadeIn and fadeOut with only jQuery?
I've tried some various things but can't make it work without jQueryUI.
Thanks / Tobias
In order to perform animations with colors, you will need to use the jQuery Color Animations Plugin or a bare-bones fx package from jQuery UI.
Alternatively, you can animate to a class with this plugin: http://plugins.jquery.com/project/animate-to-class

Categories

Resources