jquery fading border not working - javascript

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

Related

jQuery: Mouse Interaction + Simple Animation [img]

I'm new to jQuery so please work with me here. :)
[Site Image] http://imgur.com/zx803Ct
So I'm trying to have the bottles here to animate with cursor interaction.
Goal: I want the hovered image to come to the foreground and the rest to shrink into the background.
Undesired Results: The code seems to shrink all the bottles without condition. I seem to be running into trouble with the "if, then, else" section.
Process:
Store 'mouseEntered' element, do for each bottle, check if match, apply effects.
Code:
$(".sauce_bottle").mouseenter( function(){
var $active = $(this); //The "entered" image
//For each (div) bottle, check if "entered", apply effects
$('.sauce_bottle').each( function(){
if ( $active == $(this) ) {
//Shrink
alert($active.attr("alt"));
$(this).animate({
height: "230px",
width: "70px",
opacity: ".70"},
150);
} else {
//or Enlarge
$(this).animate({
height: "279px",
width: "85px",
opacity: "1"},
150, function(){});
}
});
});
If I'm missing a concept (scope) or if you guys have an alternative way of doing this that would be fantastic!
Thanks guys! :)
I would do it like this:
$(".sauce_bottle").mouseenter( function() {
$(this).animate({
height: "279px",
width: "85px",
opacity: "1",
}, 150);
$(".sauce_bottle").not(this).animate({
height: "230px",
width: "70px",
opacity: ".70",
}, 150);
});

Jquery pulsate from different colors [duplicate]

This question already has an answer here:
Jquery pulsate changing color or image
(1 answer)
Closed 9 years ago.
I want to pulsate from white to another color but i'm not sure how to add color to this code
<script>
$(document).ready(function() {
$("#white36").click(function () {
$('#book').effect("pulsate", { times:3000 }, 500);
});
});
</script>
You are going to need this plugin to animate colors with jquery (its not there be default):
http://www.bitstorm.org/jquery/color-animation/
then you can do something like:
var pulsateInterval = null, i = 0;
$(document).ready(function() {
$('#white36').click(function() {
// set interval to pulsate every 1500ms
pulsateInterval = setInterval(function(){
// animate back and forth
$('#book').animate({
background-color: 'red',
}, 500).animate({
background-color: 'white',
}, 500);
i++;
// stop at 3000 pulsations
if(i == 3000){
clearInterval(pulsateInterval);
}
}, 1500);
});
});
Pulsate only changes de opacity of an element, not the color. You can put an element with white background below your element to get what you want.
Like:
<div style="background:#ffffff;"><div id="my_elem" style="#006600"></div></div>
you could recreate the pulsing effect you want using animate in this way:
$(document).ready(function() {
$('#white36').click(function() {
$('#book').animate({
background-color: 'red',
}, 300).animate({
background-color: 'white',
}, 300).animate({
background-color: 'red',
}, 300);
});
});
for some ideas:
$(document).ready(function() {
$("#white36").click(function () {
$("#book").animate({
width: "50%",
opacity: 0.3,
fontSize: "3em",
borderWidth: "10px",
color: "black",
backgroundColor: "green"
}, 1500 );
});
});
edit: just tried to run the above code and it didn't work when background-color was specified. If i ran it without that param it worked fine though. Guess it's buggy as I tried with both "background-color" and "backgroundColor"

Using jQuery to bump list item to right on hover

I am trying to bring a little more attention to the list item being hovered by "bumping" the text a little to the right then back again when hovered over. This is what I have:
$('.ipro_menu ul li a').hover(function(){
$(this).animate({
'padding-left':'20px'},100,function(){
$(this).animate({
'padding-left':'15px'});
});
});
The padding is originally 15px, so when you hover over a link in the list, the padding increases by 5px, then quickly goes back to 15px again. The problem is that it is moving more than one element at a time. Sometimes it moves not only itself, but also the item above or below it.
Any suggestions?
I made a quick jsfiddle of what I think you are looking to do.
http://jsfiddle.net/tuXcA/
The code is basically:
$('ul').find('li').hover(function() {
$(this).animate({
'padding-left':'20px'
},100);
}, function() {
$(this).animate({
'padding-left':'0px'
},100);
});
Slides right on hover, then slides back to normal position when not hovered.
The padding is originally 15px, so when you hover over a link in the list, the padding increases by 5px, then quickly goes back to 15px again
So basically you want a bounce effect? If so:
var cssOver = { 'padding-left': '25px' },
cssOut = { 'padding-left': '15px' },
overDuration = 100,
outDuration = 100,
selector = '.ipro_menu ul li';
$(selector).mouseover(function(){
var _this = $(this);
_this
.clearQueue()
.animate(cssOver, overDuration, function(){
_this.animate(cssOut, outDuration);
});
});
Live example: http://bl.ocks.org/3077195
Personally I would suggest using this plugin: http://ricostacruz.com/jquery.transit/

.animate not working in Firefox (.css does though)

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

fadeOut() and slideUp() at the same time?

I have found jQuery: FadeOut then SlideUp and it's good, but it's not the one.
How can I fadeOut() and slideUp() at the same time? I tried two separate setTimeout() calls with the same delay but the slideUp() happened as soon as the page loaded.
Has anyone done this?
You can do something like this, this is a full toggle version:
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
For strictly a fadeout:
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');
Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp() makes for a smooth disappearing act.
const slideFade = (elem) => {
const fade = { opacity: 0, transition: 'opacity 400ms' };
elem.css(fade).slideUp();
};
slideFade($('#mySelector'));
Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435
In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:
elem.css(fade).delay(100).slideUp();
This is the solution I used in the dna.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.
The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.
This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});
It's possible to do this with the slideUp and fadeOut methods themselves like so:
$('#mydiv').slideUp(300, function(){
console.log('Done!');
}).fadeOut({
duration: 300,
queue: false
});
I had a similar problem and fixed it like this.
$('#mydiv').animate({
height: 0,
}, {
duration: 1000,
complete: function(){$('#mydiv').css('display', 'none');}
});
$('#mydiv').animate({
opacity: 0,
}, {
duration: 1000,
queue: false
});
the queue property tells it whether to queue the animation or just play it right away
Throwing one more refinement in there based on #CodeKoalas. It accounts for vertical margin and padding but not horizontal.
$('.selector').animate({
opacity: 0,
height: 0,
marginTop: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0
}, 'slow', function() {
$(this).hide();
});

Categories