Getting CSS transition animation to work - javascript

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

Related

How to run a hide function and an animation when document.ready(function)

this is my first question because I can't find a similar one.
So, I try to hide some elements when my page is ready and also an animation. It just doesn't work. Sorry for my English and I'm also very new to Jquery. Here you see the code:
$(document).ready(function(){
$("#mainbox-search-main").show();
$("#mainbox-search-extra").hide();
$("#mainbox-login").hide();
$("#mainbox-register").hide();
$("#mainbox-pasfor").hide();
$(".fab").animate({
-webkit-transition-duration: 1s /* Safari */
transition-duration: 1s
-ms-transform: rotate(180deg) /* IE 9 */
-webkit-transform: rotate(180deg) /* Safari */
transform: rotate(180deg)
});
});
It's hard to replicate it without a JSFiddle: http://www.jsfiddle.net
However, to make it easier on yourself just add a class with those properties:
JQuery
$(".fab").addClass('animate-it');
CSS
.animate-it{
-webkit-transition-duration: 1s /* Safari */
transition-duration: 1s
-ms-transform: rotate(180deg) /* IE 9 */
-webkit-transform: rotate(180deg) /* Safari */
-moz-transform: rotate(180deg) /* Firefox */
transform: rotate(180deg)
}
In addition, you don't really need to hide any elements when the document is being loaded. Just initially set those displays to none.
#mainbox-search-extra, #mainbox-login, #mainbox-register, #mainbox-pasfor{
display:none;
}
When you want to show them, just use the show() method that you have used for the #mainbox-search-main element.
Addressing Unnecessary Lag Time
I also want to point out that you may want to add a delay to the animation in case there is some undesired lag time between when the animation fires, and the DOM is considered to be loaded.
$(".fab").delay(500).addClass('animate-it');
Conclusion: Adding a Callback Function
With the hidden elements being taken care of in the CSS, we have a shorter amount of code to work with. To ensure that the animate happens AFTER the #mainbox-search-main element is shown, try adding a callback function to it:
$(document).ready(function(){
$("#mainbox-search-main").show(function(){
$(".fab").delay(500).addClass('animate-it');
});
});

Reliable hover detection with animation in JavaScript?

It seems that jquery hover (and presumably the underlying browser events) cannot be reliably used to keep track of which element the mouse is over when animations are involved, since the events do not fire if an element moves under or away from the mouse (rather than the mouse moving into the element).
See this fiddle for an example of the issue I'm having. If you hover over the div, the state according to the hover tracking events always disagree with reality, at least by the end of the animation.
I haven't tested this outside chrome, but I'm assuming the same behaviour across browsers.
HTML:
<div>hover me</div>
<p>state</p>
CSS:
div {
-ms-transition: -ms-transform 1s;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
div:hover {
position: relative;
-ms-transform: translateX(200px);
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
JavaScript:
$('div').hover(function() {
$('p').text('over');
}, function() {
$('p').text('out');
});
While the fiddle isn't a realistic example, I'm experiencing this issue in a webpage with animations. The question I have is how do I ensure that my javascript correctly knows the hover state after animations? I'd like to do this without having a global mousemove event to follow the mouse (i.e. so that I can look for the element under the last coordinate at the end of each animation).

jQuery animate Background Color slideDown

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.

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.

I need to find prototype.js based slide out tab?

I have founded this -> http://www.building58.com/examples/tabSlideOut.html
But there are some reasons that i dont want to use it:
i need prototype framework instead of jquery
i need an image to open slider (click to open) and when it opened image will change to "click to close"
Maybe someone has already the same solution of my question?
thank for you help!
CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)
The crucial parts of CSS are;
#drawer {
position: relative;
left: -200px;
/* transition is repeated for all supporting browsers */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
#drawer.open {
left: 0;
}
The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;
Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))
...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.
For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.

Categories