Okay, so far this works in Chrome, but not Firefox. It's pretty simple so I'm not sure what's going on. If I change .animate to .css it works perfectly (minus the animation).
$("#superfish-1 > li").hover(function() {
$(this).animate({"border-left" : "3px solid #A5D572", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).animate({"border-left" : "1px solid #EFEFEF", "margin-left" : "0px"}, "fast");
});
Thanks
The second parametre to the hover() function should be the animate() function as well, not css(). If css() is meant to be there, remove its second parametre ("fast").
you can not animate color and border type by default with jquery. unless you use some plugin i would recommend that you only animate the border-width.
as mentioned by #mingos you should remove the fast parameter in the css function to.
http://jsfiddle.net/meo/Gsqre/1/
tested in Chrome. Color does not animate.
This version animates the with and the margin and it works in all browsers:
$("#superfish-1 > li").hover(function() {
$(this).animate({"border-left-width" : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).css({"border-left-width" : "1px", "margin-left" : 0});
});
You can change the color separately in the css if you wish, even animate it. Or do the whole animation in CSS: http://jsfiddle.net/meo/Gsqre/3/
Okay this is how you do it. You must css the border-color first and then animate the width:
Make sure you use the borderWidth or borderLeftWidth property (without quotes) otherwise it does't work for some reason.
$("#superfish-1 > li").hover(function() {
$(this).css({"border-left" : "1px solid #A5D572"}).animate({borderLeftWidth : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).animate({borderLeftWidth : "1px", "margin-left" : "0px"}, "fast").css({"border-left" : "1px solid #EFEFEF"});
});
Related
I've worked with this many times and have had no problem. Animating the height and/or width of a DIV either by width/height: 'toggle' or replacing 'toggle' with specified width/height.
setTimeout( function(){
$('.input-group .Advanced').animate({
height: 'toggle'
}, {
duration: 500,
});
} , 500);
height: 'toggle' - Demo on JSFiddle
height: '400px' - Demo on JSFiddle
The code snippet works perfectly fine however I need this to be set to a specific height and replacing my 'toggle' to a fixed height such as '400px' does absolutely nothing...
$('.form-control' ).click(function(e) {
$(this).addClass('InputFreezeFocus');
$(this).animate({
width: '400px'
}, {
direction: 'left',
duration: 500,
});
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '400px',
opacity: 'toggle'
}, {
duration: 500,
});
} , 500);
});
The .animate() method does not make hidden elements visible as part of the effect so you have to toggle the opacity.
Link to fiddle
Your given height is not working because you have set a display:none to your .Advanced class. When you use jquery inbuilt toggle string it will take care of that and make your hidden element in view.But, when you define your own height you also have to display that element in view otherwise animation will work but not display. You can refer Jquery animate() reference .It's written there
Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.
You can do this to animate your class
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '500px',
opacity:'show'
}, {
duration: 500
});
} , 500);
This will get your hidden element in view.Demo of your code
I have two sites I'm working on where I use jQuery to animate some objects via CSS properties. Everything works fantastic in Firefox but there ware some webkit bugs where my objects disappear and reappear off screen before the animation starts.
http://coreytegeler.com/gl/ (click the text box)
$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' });
http://coreytegeler.com/justin/ (click any of the boxes)
$("#nav ul li").click(function() {
$("#nav ul li#a").animate({'margin-top' : '-300px' , 'margin-left' : '0px', 'left' : '10px'}, 500, 'swing');
$("#nav ul li#b").animate({'margin-top' : '-200px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#c").animate({'margin-top' : '-100px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#d").animate({'left' : '10px'} , 500, 'swing');
$("#nav").animate({'margin-top' : '100px'} , 500, 'swing');
});
I'm sure this has to be a known error with an easy fix but I can't seem to find a fix yet :(
From what I can make out, the problem seems to be that webkit can't animate the left property from what is initially an 'auto' value to a pixel offset. What it does is set the property to 0 and then animate from there.
The one solution I can suggest, is to calculate the current pixel offset of each li element immediately before starting the animation, and set their left properties to those offsets.
Something like this:
$("#nav ul li").each(function(){
$(this).css('left', $(this).position().left + 'px');
});
jsFiddle example
This is based on your second example link.
I need to respond to a hover over a table cell. This css code works fine:
#dialog-date-picker td {
border-style: outset !important;
border : 2px solid #606060;
cursor: pointer;
...etc
}
#dialog-date-picker td:hover {
border-style: inset !important;
border : 2px solid #6060b0;
}
However, I need a more complex hover response that I can't get in css, and I've started as follows:
$('#dialog-date-picker td').hover(function () {
$(this).css('border-style', 'inset !important');
$(this).css('border', '2px solid #6060b0');
}, function() {
$(this).css('border-style', 'outset !important');
$(this).css('border', '2px solid #606060');
}
);
The jQuery equivalent works in Chrome and Opera, but not FF. Firebug shows that the code is executed, but nothing happens. Any ideas why this should be? Thanks.
EDIT
Folks - I understand that this isn't elegant, and I should be using css and JS, and adding a class, but that's not the issue. I just took a working css solution and, as a first step, just put it in the JS above. At that point I found out that the JS equivalent worked in Opera and Chrome, but not FF. Combining the two css calls, and converting 'border-style' to 'borderStyle', didn't make a difference; it still doesn't work in FF.
Is it relevant that the dialog (jQuery UI) is dynamic? I've got a table within the dialog. Thanks for all the input.
EDIT2
Simplified the code to:
$('#dialog-date-picker td').hover(
function() { $(this).css('border', '2px inset #6060b0 !important'); },
function() { $(this).css('border', '2px outset #606060 !important'); }
);
with no change (works in IE8, Opera, Chrome, Safari, but not FF 3.6 or 8.0).
EDIT3
Ok, given up on this. All the alternative (and better) stylesheet versions work in FF, so it seems a bit pointless worrying about why this particular code doesn't work in FF...
The problem is because the second css() call is overwriting the first. Try this:
$('#dialog-date-picker td').hover(
function () {
$(this).css({
'border-style': 'inset !important',
'border': '2px solid #6060b0'
});
},
function() {
$(this).css({
'border-style': 'outset !important',
'border': '2px solid #606060'
});
}
);
Example fiddle
EDIT
Here's an extra fiddle thanks to PPvG and ptriek with a much more elegant solution which uses classes and solves the issue of setting an outset border, then immediately making it solid.
Updated Fiddle
$('#dialog-date-picker td').hover(function () {
$(this).css({
'border-style' : 'inset !important',
'border' : '2px solid #6060b0'
});
}, function() {
$(this).css({
'border-style' : 'outset !important',
'border' : '2px solid #6060b0'
});
});
Thats also a little clean up in code for you too! Try not too use so many CSS functions, as your just essentially 're-dipping' when there's no reason too!
Also is your #dialog-date-picker being created by jQuery, if so you need to nest this function inside the function that creates that td.
i guess the id dialog-date-picker is created dynamically so better to use on with events mouseover and mouseout.
$('#dialog-date-picker td').on('mouseover' :
function () {
$(this).css('border-style', 'inset !important');
$(this).css('border', '2px solid #6060b0');
},
'mouseout' :function() {
$(this).css('border-style', 'outset !important');
$(this).css('border', '2px solid #606060');
}
);
You should preferably change both your CSS and JS and add a class to the TD on hover, and define this in your CSS. This reduces JS and keeps things where they belong:
http://jsfiddle.net/bDBWE/3/
$('#dialog-date-picker td').hover(function () {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
jquery css() uses inline style sets to set the property. The API it's using doesn't allow !important in the string.
See also https://bugs.webkit.org/show_bug.cgi?id=73941 for the WebKit bug on this; the existence of that bug (which they only recently fixed) is what allowed your script to work in Chrome and Safari.
Okay, I've been trying to get this for almost 4 hours now, and it just won't work.
I have a link:
<a id="togglecolor" href="#" onclick="ToggleCover();">
Click here to toggle DIV so you can see what I did.
</a>
And I have a div:
<div id="framecover" style="position:absolute; width:97%; height:500px; z-index:100; background-color: transparent;">
</div>
I am trying to make a script so the link toggles the background color of the div from transparent to red and back again when you click it again.
This is the code I have:
$(function() {
$('#framecover').css('backgroundColor', "transparent")
var framecover = '#framecover'
$("a#togglecolor").click(function(){
if ($(framecover).css('backgroundColor') == "transparent")
{
$(framecover).animate({ backgroundColor: "red" }, "slow");
}
else
{
$(framecover).animate({ backgroundColor: "transparent" }, "slow");
}
});
});
Through my testing, I've been able to narrow down to where the problem is. It's on this line: if ($(framecover).css('backgroundColor') == "transparent")
Undoubtedly, he problem is above code is the wrong syntax for "if framecover's background-color is transparent". The problem is that I have no clue what the syntax is and I've been scouring the internet for two hours looking for the answer and I can't find it.
Note: I do have the jquery color plugin. This code: $(framecover).animate({ backgroundColor: "red" }, "slow"); works fine. It's the if statement that's giving me trouble.
Assuming you want it to start at transparent (if not just switch them):
$("a#togglecolor").toggle(function(){
$(framecover).animate({ backgroundColor: "red" }, "slow");
}, function(){
$(framecover).animate({ backgroundColor: "transparent" }, "slow");
});
First this I'd try is to use console.log($('#framecover').css('backgroundColor')) to find out exactly what the background color is at the point of the test (might be none). Copy this and it should work.
Second option, check if the background is red, make the transparent background setting part of the else execution
Have you tried :
if (... .css("backgroundColor") == "rgba(0 ,0 , 0, 0)") { ...
Works in Chrome but I haven't tried all browsers.
jsFiddle here.
I just want some simple links where if it's hovered over, instead of having a line appear under it suddenly, it should fade. I'm trying this, but to no avail:
$(document).ready(function(){
$('#footer a').mouseover(function(){
$(this).animate({
border-bottom: 'border-bottom: 1px solid #D8D8D8'
}, 1000, function() {
// Animation complete.
});
});
});
What should I be doing?
Thanks.
You need a few changes here, first you should animate only the color, like this:
$(function(){
$('#footer a').mouseover(function(){
$(this).animate({
borderBottomColor: '#D8D8D8'
}, 1000, function() {
});
});
});
Also, give the border an initial size so it doesn't just "appear" (when changing from 0 to 1px), like this:
#footer a { border-bottom: solid 1px transparent; }
You can see a working demo here, to make this work you need either the color plugin or jQuery UI so the colors can animate...core doesn't handle colors, or transitioning anything that's not a number.
Here's a more complete demo, probably what you're ultimately after:
$(function(){
$('#footer a').hover(function(){
$(this).animate({ borderBottomColor: '#D8D8D8' });
}, function() {
$(this).animate({ borderBottomColor: 'transparent' });
});
});