Javascript: If something gets visible blend it in - javascript

i want something really specific. I develop an vr-experience with a-frame.
I have many events which sets the visibility of an object to "false":
document.getElementById('button').setAttribute('visible', 'false')
Now my Question: It dosn´t look well when they suddenly pop up but when i try to blend them in i need an animation for all objects which gets visible. Can i make an script which says when something gets visible it should blend in instead of poping up?

With A-frame, you'll want to create an animation element as a child of the 'button' entity, then set the begin attribute to be a named event:
<a-entity id="button" material="opacity: 1">
<a-animation attribute="material.opacity"
dur="1000"
to="0"
begin="myEvent"></a-animation>
</a-entity>
...
document.getElementById('button').emit('myEvent');
Relevant documentation:
https://aframe.io/docs/0.8.0/introduction/javascript-events-dom-apis.html#emitting-an-event-with-emit
https://aframe.io/docs/0.8.0/core/animations.html

Just a simple example using css transitions, note that you could perform several transitions on the same element. Full example Here https://jsfiddle.net/9hvede11/
We have two (could be more) classes. In this case in the beginning the element have a .short class, then because of some event, it changes to .large. The transition property is saying how to accomplish the transition from the previous state.
.short{
width: 100px;
height: 100px;
background-color: green;
}
.large{
transition: width .2s, height 2s, background-color 2s;
height: 200px;
background-color: red;
width: 200px;
}
in pure Javascript you have something like:
button.addEventListener("click", function(){ //some event
var div = document.getElementById("square");
div.className="large"; //change class
});

Related

How can I adjust this javascript code so an animation is activated whenever the mouse hovers over the element?

So I used this code from Justin Aguilar's CSS3 Animation Cheat Sheet to activate an animation on a button when I hover over it:
<div id="object" class="pulse">
<script>
$('#animatedElement').hover(function() {
$(this).addClass("pulse");
});
</script>
The problem is that the animation just continues even when I am no longer hovering over the button. What can I do to make a button animate every time a user hovers over it, but stop when they move the mouse away? Whenever I tried to tweak it with anything involving .stop, it just keeps the animation from playing at all.
I am new to coding and this has been a huge pain today, so any help would be very much appreciated! Thanks!
You don't need JavaScript for that at all.
Use CSS selectors. #animatedElement:hover in your case.
Here you go with one more solution
$('#animatedElement').hover(function() {
$(this).addClass("pulse");
}).mouseleave(function(){
$(this).removeClass("pulse");
});
.pulse {
background: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="animatedElement">Hover Me!!!</div>
Hope this will help you.
the hover() method accepts two callbacks: one for when the mouse enters the html element, and one for when it leaves. Therefore, you could simply add another callback to your function to remove the "pulse" class.
$('#animatedElement').hover(function() {
$(this).addClass("pulse");
},
function(){
$(this).removeClass("pulse");
});
Alternatively, you could just go with Alex's excellent answer.
You can use CSS to make an animation, for example, in this code:
.pulse {
background: GREEN;
border-radius: 6px
transition-property: background, border-radius;
transition-duration: 1s;
transition-timing-function: linear;
}
.pulse:hover {
background: BLACK;
border-radius: 50%;
}
You have set in css the start properties for the element, and transition declaration, in this example i'm going to do a transition in the background and the radius properties when hover on a element with pulse class.

trying to use jQuery switchClass to create a reveal animation

I'm trying to get an element to change its class to one with a different height attribute to make a reveal effect. I'm just getting an error which says uncaught type error undefined is not a function.
html -
<div id="rollup" class="header-container">
<header class="wrapper clearfix">
<h1 class="title"></h1>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
<p class="btnRetract">
see more
</p><!--end div retract -->
</div><!--end div rollup-->
Javascript -
$(".btnRetract").on("click", function() {
var $content = $("#rollup");
switchClasses($content);
     
return false;
 
function switchClasses($content){
if($content.hasClass("header-container")){ 
$content.switchClass("header-container", "header-container-retracted");
}
else {
$content.switchClass("header-container-retracted", "header-container");
}
}
CSS -
.header-container {
border-bottom: 20px solid #e44d26;
height: 90vh;
position:relative;
}
.header-container-retracted {
border-bottom: 20px solid #e44d26;
height: 20vh;
position:relative;
}
That's because switchClass is not a function defined by the jQuery plugin. It is actually part of the jQuery UI framework. However, if you need to "switch" classes using the jQuery plugin you can use either toggleClass, removeClass and addClass. Furthermore, you can even use animate to customise the transitions between property values
You dont need a switchClass function (doesnt exist anyway and is causing your error)
You can use answer from squint or.if you dont want to check.for the existence of one of the classes you can do this all in one line:
$content.removeClass('header-container').addClas('header-container-retracted');
As others have pointed out, it would be easier to use the jQuery toggle method, but there are other issues as well with your Javascript and CSS. Here's a working demo that you can use as an example.
Demo
Javascript:
$(".btnRetract").on("click", function() {
$("#rollup").toggleClass('header-container-retracted');
});
That's all you need for the click handler if you're using the built in toggleClass method. It accepts one string as an argument, which is the name of the class that you want to toggle. You can also have a comma separated list of two class names, wherein it will toggle between the two classes, but in this case, you don't need to swap the classes. You simply want to add or remove your .header-container-retracted class, because your .header-container class has all of your base styles in it. The .header-container-retracted class only has to contain the properties you want to override in the base styles and as long as it is AFTER your base .header-container class in your stylesheet, the normal cascading behavior of CSS will ensure that its properties will override the base properties.
CSS:
.header-container {
position: relative;
border-bottom: 1.5em solid #e44d26;
height: 85vh;
overflow: hidden;
margin: 0;
padding: 0;
-webkit-transition: height 1s ease;
transition: height 1s ease;
background-color: white;
padding: 1em;
}
.header-container-retracted {
height: 3.5em;
}
So, in your CSS, you don't need to repeat any of your styles in the .header-container-retracted. Note also, that I added overflow: hidden to the base styles. Without this, your content "inside" the header-container element would just spill out and be visible when the header-container was "retracted". Also, I add some transitions to give the opening and closing a nice smooth animation. The transitions will not be supported in IE8 or IE9, but they will not prevent the opening/closing of the element. As #Leo pointed out, if the animation is important to you in IE8/IE9 browsers, you can use jQuery's animate method to handle the transitions instead.
Finally, you'll note in the demo that I set your .btnRetractelement absolute positioning. Because you're using relative heights, you need to ensure that your toggle button is always visible. On a very small viewport, 20vh would be so small that it would obscure the button and make it impossible to expand the header-container.

Why is setTimeout needed when applying a class for my transition to take effect?

I have an element with a transition applied to it. I want to control the transition by adding a class to the element which causes the transition to run. However, if I apply the class too quickly, the transition effect does not take place.
I'm assuming this is because the .shown is placed onto the div during the same event loop as when .foo is placed onto the DOM. This tricks the browser into thinking that it was created with opacity: 1 so no transition is put into place.
I'm wondering if there is an elegant solution to this rather than wrapping my class in a setTimeout.
Here's a snippet:
var foo = $('<div>', {
'class': 'foo'
});
foo.appendTo($('body'));
setTimeout(function(){
foo.addClass('shown');
});
.foo {
opacity: 0;
transition: opacity 5s ease;
width: 200px;
height: 200px;
background-color: red;
}
.foo.shown {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Actually, the point is not about the setTimeout, but about how the element is rendered.
The CSS transition will only appear if the element is rendered with a property value, and then this property is changed.
But once you append the element, it does not mean that it was rendered. Simply adding a setTimeout is not enough. Thought it may work for you, in some browser versions it won't work! (Mostly Firefox)
The point is about the element's render time. Instead of setTimeout, you can force a DOM render by requesting a visual style property, and then changing the class:
var foo = $('<div>', {
'class': 'foo'
});
foo.appendTo($('body'));
//Here I request a visual render.
var x = foo[0].clientHeight;
//And it works, without setTimeout
foo.addClass('shown');
.foo {
opacity: 0;
transition: opacity 5s ease;
width: 200px;
height: 200px;
background-color: red;
}
.foo.shown {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
When you do DOM manipulation that that javascript relies on immediately afterwards, you need to pause javascript execution briefly in order to allow rendering to catch up, since that will be done asynchronously. All a blank setTimeout does is move the code within to the end of the current execution pipeline. The browser must complete rendering the new layout before it will obey a trigger for your transition so the setTimeout is a good idea and in my opinion the most elegant solution.

how to show hover effect on a image where i hover my mouse

i have multiple images, on hover on particular image i want to apply on that image only, it should not effect on other image.
More Explanation:
In this example(http://codepen.io/anon/pen/AnsqI), suppose i have multiple images & want to apply the certain effect on only on that image where i hove my mouse.
I am using class attribute...
<script>
$(function() {
//For grid view hover effect
$('.grid_content').hide()
$('.grid_container').hover(
// Over
function() {
$('.grid_content').fadeIn();
}
,
// Out
function() {
$('.grid_content').fadeOut();
}
);
//--js for grid view hover effect ends here
});
</script>
Something i have to apply like $this , i tried like($this.$('.grid_content').fadeOut();)but it did not work.
Somebody please help me.
Use this:
$('.container').hover(function(){
$('.content',this).fadeToggle();
});
Check this Demo http://codepen.io/anon/pen/BxbID
You could consider using CSS and the opacity attribute (or display). You could progressively enhance the hover effect with CSS3's transition property as well. There isn't necessarily a need for JS here, and I only added five lines of CSS (unprefixed) to achieve the same effect.
.content {
width: 100%;
height: 100%;
background: rgb(255,255,255,0.9);
padding: 5px 15px 10px 15px;
box-sizing: border-box;
opacity: 0;
transition: opacity .2s linear; /* CSS3 progressive enhancement */
}
.content:hover {
opacity: 1;
}
Depending on how you organize your HTML, you may need to make modifications, but the concept is the same.
Check out the demo: http://jsfiddle.net/NeEuP/1/
There are 2 ways to do this. You can either reference it using the this javascript keyword and surrounding it in a jQuery function:
$('.grid_container').hover(function(){
$(this).fadeIn();
, function(){
$(this).fadeOut();
});
Or you can:
$('.grid_container').hover(function(e){
$(e.currentTarget).fadeIn();
, function(e){
$(e.currentTarget)$(this).fadeOut();
});
... basically you're getting element through the event object. I personally prefer this method, because it's more flexible it doesn't depend on the actual scope (this depends on scope).

Fire CSS3 Transform from Javascript button click

I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform

Categories