Develop Reference

javascript display image on screen with animation

I'm a beginner in javascript and I stumbled upon this problem.
This is a part of markup from site i'm working on:
<div class="row">
<div class="col-lg-12">
<div id="target">
<div id="bgDiv">
<img src ="someurl">
</div>
</div>
</div>
</div>
It's a part of a simple bootstrap layout. What i want to do is to animate the #target div so that the image fills the whole browser screen on mouseover , preferably using pure javascript. If I do it with this function:
function(){
var target = document.getElementById('target');
function FullScreen {
target.style.cssText ='position:absolute;top:0;bottom:0;left:0;right:0;z-index:999'
document.body.appendChild(target);};
target.addEventListener('mouseover', FullScreen)};
It does the job of displaying the image covering whole browser window, but I'm cluless how to make the "fill" animation. I tried experimenting with transitions, but i think since i change the 'position' property and append the element to body it does not work.
I would be grateful for any help or suggestions.

As Portal_Zii already mentioned, you can easy create animations without javascript using CSS3 properties only like:
transition
animation
With this knowledge its quiet simple to implement an hybrid solution with CSS3 transition property, the onmouseenter and onmouseleave event.
Try to run the Code and re-size the window.
var myDiv = document.getElementById("myDiv");
var myImg = document.getElementById("myImg");
myDiv.onmouseleave = shrinkImage;
myDiv.onmouseenter = growImage;
function shrinkImage() {
myImg.style.width = 50 + "px";
myImg.style.height = 50 + "px";
}
function growImage() {
myImg.style.width = window.innerWidth + "px";
myImg.style.height = window.innerHeight + "px";
}
img {
width: 50px;
height: 50px;
transition: all 0.7s;
}
<div id="myDiv">
<img id="myImg" src="data:image/gif;base64,R0lGODlhMAAwAOMAANTS1Ozq7Nze3PT29Nza3PTy9OTm5Pz+/NTW1Ozu7OTi5Pz6/P///wAAAAAAAAAAACH5BAEAAAwALAAAAAAwADAAAAT+kMlJq72YnUDMymAoMgUCAMWorqQJBGy8LMc1EKcSr4sgwJYbAEHYqQInxMBywA1rxlDCJfhUBCaENZppngAG6MTwXXJB02yKkhgCEmfQJknYkr6GOGgg+AbEA1kCegdiFAcFSQhrGlSGOyUvA48MCklVEwgmBGZRfUMCjBNCJ3kSlkOdRmRfCH+HAVlKEmSaojsLsUkAoWIHqLwfbUNwZwcJTkkJW4FZf5FghHxZQwqdbVkDQgjFhGmKCTULlrYHAwbhehQFWK0eDHwAnHHmlBq5Liec5gWTZws4EAhIMIBGhWlu5qmb8gVUgGViFhhwsUhdCzcNiShYJgFRH0z+FiUSoNjwxI8CNAxanIDIgAJq1EDdWtnRXIJ2u0rZo8mygAEsznaGKEQ0BqIABt7VLDTipgAFjI497KfyAlMJNxUoDIHkBCNgGQk8DfBQW9WuKEag7fYpJkY3mggwQjvzQlduE9DmfNtKQY0DE72OCPyGpc2kPrCM1JTP1Bxiat10s7pA24AECZAaCGAFsIvJGe6CHlG04926Fgh341egtevX/fr507BWbZZuumDCLVlRQ63CImpLyFey1W4Bf0/bhkxL026+cIsB/oK6gi7gDBZkRoo0wWZ04B+mo019OV56rHpz/Uzo5QlVGRgKpEG0vv379dklgY+BlDwBYgUw6INYACZm4IAAXmIHCLkV5+CDGQ1RHROE6UYSdLtQNJ4K2r3E2IcghhiiAQUIJUEEADs="
/>
</div>

You can describe all of the target's element properties in the class 'over' of css and describe an animation through transition on properties of position of your element. Then when you this class 'over' to element with id=target.
function FullScreen {
target.style.classList.add('over')};

I think all you need to do is add transition styles in your css:
#target {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
Additionally you could accomplish this in just using css no?
#target {
DEFAULT:STYLES;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#target:hover {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
padding:0;
z-index:999;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

why css transition work with delay

So, I touch css property 'max-height' of me categories list using js.
In first case when list is not full opened transition works fine.
In second case when I need to hide some part of list, css transition start like with delay.
.category_list>ul {
display: inline-block;
text-align:left;
overflow: hidden;
word-wrap: break-word;
width: 170px;
transition: max-height 1s ease-out;
-webkit-transition: max-height 1s ease-out;
-moz-transition: max-height 1s ease-out;
-o-transition: max-height 1s ease-out;
}
$('body').on('click','.full_category_list>span',function(){
if ($(this).text()=='open list') {
$(this).parent().parent().find('ul').stop().css('max-height','500px');
$(this).text('hide list');
} else {
var ul = $(this).parent().parent().find('ul');
console.log($(ul).attr('data-height'));
$(ul).stop().css('max-height',$(ul).attr('data-height'));
$(this).text('open list');
}
});
How to say to list hide right now? Please help me :)
Lik to fiddle here fiddle

So, decision is so simple!
Need to open list on its childrens sum height. Right code:
$('body').on('click','.full_category_list>span',function(){
if ($(this).text()=='open list') {
var ul = $(this).parent().parent().find('ul');
$(ul).stop().css('max-height',$(ul).attr('data-fullheight'));
$(this).text('hide list');
} else {
var ul = $(this).parent().parent().find('ul');
$(ul).stop().css('max-height',$(ul).attr('data-height'));
$(this).text('open list');
}
});
And lik to updated fiddle fiddle
Thanks #vel !!!

Updated fiddle - no need JS!!!
Fix delay solution:
Put cubic-bezier(0, 1, 0, 1) transition function for element.
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}

Div Show Hide With Effect

I have hiding a div with the simple query.
I want add a effect when hiding the div.
here is my code
<script type="text/javascript">
function divcustumfldshow() {
var dive = document.getElementById("divcustumfld");
dive.style.display = (dive.style.display == "none") ? "block" : "none";
}
<script>

I saw CSS3 in tags, so here is a pure CSS3 example:
.block {
transition: opacity 0.5s linear, transform 0.5s linear;
opacity: 1;
}
.block.hidden {
opacity: 0;
transform: scaleY(0);
}
Here's the fiddle: http://jsfiddle.net/andunai/1e21endf/
However, in this case the element will just disappear visually and won't free the place which it takes, so you'll have to end up with either making this element have position: absolute or animage padding, margin and max-height as well - note that transition of height is still having problems: How can I transition height: 0; to height: auto; using CSS?
.block {
transition: opacity 0.5s linear, transform 0.5s linear, max-height 0.5s linear, padding 0.5s linear;
opacity: 1;
max-height: 30px; /* This one must be approximately of the
height of element, not less */
}
.block.hidden {
opacity: 0;
max-height: 0;
padding: 0;
transform: scaleY(0);
}
Here's an example of adding almost true scaling: http://jsfiddle.net/andunai/1e21endf/1/

If you want a pure CSS3 solution to fade out and then immediately hide, you can simulate the hiding of the element by setting the max-height to 0. You also need to set overflow:hidden when the element is hidden to ensure the max-height isn't affected by the contents.
When you animate the max-height, you delay it by the fade-out time and set the animation time to 0s to ensure it happens immediately when the fade-out has completed, and vice versa on show:
function divcustumfldshow() {
var dive = document.getElementById("divcustumfld");
// toggle the class name - this will need to be more inteligent if it has multiple classes
dive.className = dive.className ? '' : 'hidden';
}
#divcustumfld {
transition: opacity 2s linear, max-height 0s linear 0s;
opacity: 1;
background: red;
max-height:100%;
}
#divcustumfld.hidden {
opacity: 0;
transition: opacity 2s linear, max-height 0s linear 2s;
max-height: 0;
overflow:hidden;
}
<button onclick="divcustumfldshow()">Click</button>
<div id="divcustumfld">Foo<br/>Bar</div>
<div>Blah blah</div>

It is not recommended but for idea see output below,you can make an interval and can make opacity alter with each interval. I advice you to use css3 or jquery for effects
var count= 1;
i = setInterval(function(){
divcustumfldshow(count)
if(count==10)
clearInterval(i);
else
count++;
},200);
function divcustumfldshow(count1) {
var dive = document.getElementById("divcustumfld");
if(count1==10)
{dive.style.display = "none";}
else {
console.log(dive.style.opacity)
dive.style.opacity = (10-count1)/10;
}
}
#divcustumfld{width:200px;
height:200px;
background:red;
opacity:1;
}
<div id="divcustumfld">
</div>

demo - http://jsfiddle.net/thjzgv93/
you can use css3 opacity to hide the element
#divcustumfld {
opacity:1;
transition: .5s linear;
}
#divcustumfld.hide {
opacity:0;
}
or you can use translate
demo - http://jsfiddle.net/thjzgv93/1/
#divcustumfld {
transition: .5s linear;
}
#divcustumfld.hide {
transform:translatey(-100%)
}

<div id="divcustumfld">
Your data elements
</div>
Ok
$('#btn1').click(function(){
$('#divcustumfld').hide();
});
http://jsfiddle.net/mynameisvikram/vv0ranzo/

How do I change the opacity of an image?

<script type="text/javascript">
$(document).ready(function(){
$('#logo').mouseenter(function() {
$('#logo').fadeTo("fast",0.3);
});
$('#logo').mouseleave(function() {
$('#logo').fadeTo("fast",1)
});
});
</script>
I made this to change the opacity of an image while hovering over it with the cursor, but this doesn't happen. :(

You don't need jQuery for that, you can use CSS:
Example HTML - you need it to have the ID logo.
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />
CSS
#logo {
opacity: 1;
filter:alpha(opacity=100);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
#logo:hover {
opacity: 0.3;
filter:alpha(opacity=30);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
http://jsfiddle.net/pFEdL/2/

What does you HTML look like for your image? Is it embedded in other divs?
SO: Jquery mouseenter() vs mouseover()
As gilly3 states in the question above, "Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter".

Make CSS hover element permanent onclick

So I have created a little box with some CSS animation:
.boxtest
{
width: 50px;
height: 50px;
background-color: green;
opacity: .2;
transition: opacity .8s, width .8s ease-out;
-moz-transition: opacity .8s, width .8s ease-out;
-webkit-transition: opacity .8s, width .8s ease-out;
-o-transition: opacity .8s, width.8s ease-out;
}
.boxtest:hover {
opacity: 1;
width: 70%;
}
What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.
I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command. Any help would be awesome!
http://jsfiddle.net/r75gC/

Here you go!
Basically I used jQuery to add a class to the div. You can choose one of the two below.
//onClick
$(".boxtest").on("click", function () {
$(".boxtest").addClass('permahover');
});
//onHover
$(".boxtest").on("mouseenter", function () {
$(".boxtest").addClass('permahover');
});
I changed the CSS to:
.boxtest:hover,
.permahover {
opacity: 1;
width: 70%;
}
http://jsfiddle.net/rFRc5/2/

If you haven't a lot of experience with javascript I would recommend using JQuery. Use this to include the JQuery libraries in your website:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
this will allow you to simply do (in your html file):
<script>
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); });
</script>
also for the above change .boxtest:hover to boxtesthover (or whatever you want)

jQuery is a bit overkill for this.
Instead of hover, use another class name, then just add this to the element
onmouseover="this.className='newClassName'"