jQuery animate Background Color slideDown - javascript

I am trying to animate the background color when hovering an element.
For instance, say I have a div which when I hover, I want the background to change into red, and slideDown, and fadeOut on mouse leave.
$('div.Item').hover(function () {
$(this).css('background-color', 'red').slideDown(400);
},
function () {
$(this).css('background-color', 'transparent').fadeOut(400);
});
There are 2 issues with this.. the SlideDown isnt working, the color red just comes in.. also on mouse leave, the element is completely dissapearing (I am assuming because the fadeOut is working on the element itself and not the transition for background-color).
Is there any tutorial or anyone that can help achieve this please?

You can achieve the same effect by making it a background image, also using the .animate to change css and animation effects together instead of keep chaining, this code would help:
$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
check this LINK and see the demo too!

That's because fadeOut is a jQuery Object method. It would only work on DOM elements, selected with jQuery.
The most elegant solution to your problem would be to use CSS transitions.
Here is a pseudo css snipet with your requirments:
div.Item
{
background-color: #your-background-color;
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
div.Item:hover
{
background-color: #your-new-background-color;
}
Always try to write as little code as possible. And avoid capital letters in your css class names.

Related

Why do jQuery's .fadeOut() and .fadeIn() stop working when a transition is applied in CSS

When I apply a transition on an element with CSS, jQuery's .fadeOut() and .fadeIn() stop working.
I have a Solution for this but, why does this happen?
Why do .fadeOut() and .fadeIn() work like .hide() ?
Where have the effects gone while there is a css transition being applied?
When I have to apply any jQuery animation, I always remove the transition and then apply jQuery animation and then add the transition back!
Is there any other trick to do this? Or is this the only way?
cloned.css('transition', 'none');
cloned.fadeOut();
setTimeout(function(){
cloned.css('transition', 'all 500ms cubic-bezier(0.5, 0.1, 0.7, 1.5)');
});
fadeOut and fadeIn will work with transitions, so long as you are not setting the transition to effect changes in opacity.
Working Example
$('.div1').click(function () {
if ($('.div2').is(':visible')) {
$('.div2').fadeOut(3000);
$('.div2').css('height', '0px');
} else {
$('.div2').fadeIn(3000);
$('.div2').css('height', '400px');
}
});
.div1 {
height:20px;
width: 200px;
background: blue;
}
.div2 {
display:none;
height:100px;
width: 200px;
background: red;
transition: background-color 3s, height 3s;
}
Here's why this works:
The .fadeOut() method animates the opacity of the matched elements.
Once the opacity reaches 0, the display style property is set to none,
so the element no longer affects the layout of the page.
From the API Documentation
So, basically both fadeOut and fadeIn animate the opacity of the element, if you set transition: all or transition: opacity you're trying to run two different animations on the same property at the same time.
To work around this you can simply specify which properties you want the css transition to apply to.
Rather than using this:
.some_element {
transition: all 1s;
}
Use this:
.some_element {
transition: height 1s, background-color 1s, some_other_property 2s;
}
JQuery .fadeOut()/.fadeIn() will not work with Transition. Because CSS Transition equivalent to them. As they are equivalent, always the last option will be in action. If you want both try CSS animation property. This could help you-
http://jsfiddle.net/webdevron/9a79L/
Again if you want to use a jQuery function then write as bellow:
cloned.css('transition', 'none');
cloned.fadeOut( "slow", function() {
// Animation complete.
});

Getting CSS transition animation to work

I'm currently playing around with CSS animations and I'm looking to take a flat hand and have the hand move down the page i.e have a blank page and have a hand move down the page. As such I have been unsuccessful.
Here is my HTML code:
<div id ="splash" data-role="page">
<center>
<img id='Hand' style="position:absolute;top:-30%;" src="css/images/hand.gif">
</center>
</div>
Now I've been following a tutorial and have been using the following CSS:
.handmove{
transform: translate(0,1000px);
-webkit-transform: translate(0,1000px); /** Safari & Chrome **/
-o-transform: translate(0,1000px); /** Opera **/
-moz-transform: translate(0,1000px); /** Firefox **/
}
.objecttransition{
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
From what I understand is .handmove is used to move the images position from -30% to 1000px down the screen. But the objecttransition class is to allow this movement to animate from point -30% to 1000px down. Correct me if I'm wrong?
Now what I look to do is as the page loads I want to add these classes to the hand using jQuery:
$(document).on('pagebeforeshow','#splash',
function()
{
$("#hand").addClass("objecttransition");
$("#hand").addClass("handmove");
});
I've also used the .ready() event but that also doesn't seem to work. I'm not to sure why the animation isn't working? Any ideas?
I would guess, the problem is the spelling,
id='Hand'
vs
$("#hand")
Use the same capitalization in both places.
Sigh... Silly Error!! With the .addClass() I used hand instead of Hand.Change .addClass('hand') to .addClass('Hand'). I then used the .ready() instead of on('pagebeforeshow','#splash',. Thus we have:
$(document).ready(
function()
{
$("#Hand").addClass("objecttransition");
$("#Hand").addClass("handmove");
});

hidden header drop down on click

For a site I am working on I'd quite like to use a similar drop down effect as here http://shop.jack-hughes.com/ when you click info a hidden div drops down.
I can't work out if it uses only CSS3 or Javascript/CSS can anyone point me in the right direction or tell me the name of the effect; pretty simple I guess but for the life of me can't find another example.
combination of CCS3 and js
Here is what is used in the website you refer
js:
Event.observe(window, 'load', function () {
Event.observe('info', 'click', function () {
$('aside').toggleClassName('open');
});
});
Event.observe is from the prototype framework - http://prototypejs.org/doc/latest/dom/Event/observe/
The equivalent in jQuery(http://jquery.com/) for instance would be:
$(document).ready(function () {
$('.info').click(function () {
$('aside').toggleClass('open');
})
});
css:
aside.open {
height: 21.25em;
}
aside {
position: relative;
background-color: #3f4642;
width: 100%;
color: white;
letter-spacing: 0.1em;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
The HTML element is <aside>....</aside> but it's no difference if you choose div.
They have a small piece of Javascript that does this that can be easily done on any website. Basically you need a hidden div at the top of your page, and upon clicking a link you simply show the div.
The code that they used was:
Event.observe('info', 'click', function(){
$('aside').toggleClassName('open');
});
But if you take a look at jquery then you will see that manipulation of elements is quite easy to do.
One thing that they do use in addition is a CSS3 transition in their open class:
.aside {
transition: all 0.3s ease-out 0s
}
This is what is causing the smooth transition effect. So you can use either jQuery or the CSS3 transition, both give the same effect. I would say that the CSS3 transition is nicer, but then again you will be alienating certain browsers if they do not support transitions.
Probably using jQuery. Something like:
http://api.jquery.com/toggle/
In addition to what Deif discovered they're also using CSS transition
transition: all 0.3s ease-out;
and also make use of the "::selection" pseudo class for their "aside" class, see developer.mozilla.org

CSS3 Javascript trigger transition animation

I have a DIV class setup as follows:
div.map_view{
height: 420px;
transition: height 2s;
-moz-transition: height 2s; /* Firefox 4 */
-webkit-transition: height 2s; /* Safari and Chrome */
-o-transition: height 2s; /* Opera */
}
The purpose is when I change the height of this DIV, it animates a scroll (up in this case). When I call this function in my script:
document.getElementById('map_view').style.height = '0px';, it just immediately disappears (doesn't animate). However, if I comment this out and call the exact same line in my JS debugger, the animation works.
Why is this? What am I missing that causes it to do nothing in my script?
I know I've cut a couple of corners with this by using jquery but here's what I got:
http://jsfiddle.net/qZ6J4/7/
Take a look at that.
I actually found a helpful tutorial here: CSS3 Transitions in JavaScript. I basically setup my two CSS3 class definitions and use jQuery's .toggleClass() function to change between the two.

CSS3 transition fade-out display property

I was trying to make fade out transition with css3 but found out that display is not working with transitions.
i have a group object <div id=groupID> with <h2> title and <div class='group'> and i have onclick event bind to <h2> that should make group class to dissapear. i've tried to overcome display problem with {opacity: 0; height: 0; overflow: hidden;} This works fine as it has same effect as {display:none} BUT with
CSS
transition: all 2s ;
-webkit-transition: height 2s ease-out;
transition: opacity 2s ease-out ;
display: block;
-webkit-transition: opacity 2s ease-out;
JS
//collapse function
block.setStyle({opacity: 0});
block.setStyle({height: 0});
//expand function
block.setStyle({opacity: 1});
block.setStyle({height: 'auto'});
it doesn't do any animation on close but it fades in on reappearance. It just disappear instantly.
yes i need it in CSS3. NO, i can't use jQuery
any idea?
Thanks
Don't try and transition to and from auto. It won't work.
You may be able to calculate the height in pixels of the element with JavaScript and use that in your block.setStyle() calls.

Categories