Animated element deletion HTML CSS JS - javascript

please tell me how to make an activity, when you press red square, the red square is removed, and the green one slowly decreases, my code doesn't work
function del() {
document.getElementById("del").style = "display:none";
}
.container {
width: 30vmin;
background: green;
transition: all 5s ease;
}
#del {
width: 10vmin;
height: 10vmin;
background: red;
}
<!DOCTYPE html>
<body>
<div class="container">
<div id="del" onclick="del()"></div>
</div>
</body>
</html>


There are two related factors here:
the container only has height because its child (the red square) has
height so when you make that 0vmin the green div also disappears as
it now has no content with height - this is not the same as setting its
style.height to 0
on clicking the red square it disappears immediately as required but
nothing is done about the container
This snippet adds two things: it gives a specific initial height to the container and it sets the container's opacity to 0 when the red square is clicked. Obviously you can change the effects you want (is it to go slowly smaller rather than slowly disappear for example?):
function del() {
document.getElementById("del").style = "display:none";
document.querySelector(".container").style.opacity = '0';
}
.container {
width: 30vmin;
background: green;
transition: all 5s ease;
height: 10vmin;
}
#del {
width: 10vmin;
height: 10vmin;
background: red;
}
<!DOCTYPE html>
<body>
<div class="container">
<div id="del" onclick="del()"></div>
</div>
</body>
</html>


Display: none can't be used with transitions. Try opacity
Also when your red box is removed from the UI, your .container has no height set and seems to disappear as well. In reality it's still there but just has 0 height


You need to set an opacity to the container element to use the transition and set a height to it so it doesn't lose the height when the #del element is removed. To make it easier I created an javascript event handler instead of your inline event handler.
document.querySelector('#del').addEventListener('click', (e) => {
e.currentTarget.style = "display:none";
e.currentTarget.parentElement.style = "opacity:0";
});
.container {
width: 30vmin;
height: 10vmin;
background: green;
opacity: 1;
transition: opacity 5s ease;
}
#del {
width: 10vmin;
height: 10vmin;
background: red;
}
<body>
<div class="container">
<div id="del"></div>
</div>
</body>


display: none; isn't affected by transitions: an element is either displayed or not. There are two properties that are affected by transitions that might interest you:
opacity: 0;
width: 0;
opacity is similar to display: hidden; but can range from 0.0 to 1.0 (from 0% to 100%).
width simply "hides horizontally" the element (it removes a dimension).
I suggest to use classes instead of ids and switch to the one that "deletes" the element (actually hides it).
function del() {
const delEl = document.getElementById("del");
delEl.style = "display:none";
const containerEl = document.getElementById("container");
containerEl.style = "width: 20vmin";
}
#container {
height: 10vmin;
width: 30vmin;
background: green;
transition: all 5s ease;
}
#del {
height: 10vmin;
width: 10vmin;
background: red;
}
<!DOCTYPE html>
<body>
<div id="container">
<div id="del" onclick="del()"></div>
</div>
</body>
</html>

Related

How to slide div over when showing another div of variable width with CSS and Jquery?

$('#div-1').click(function() {
if ($('#div-2').hasClass('shown')) {
$(this).css('left', 0);
$('#div-2').removeClass('shown');
} else {
// $('#div-2').css('width', 'auto');
$('#div-2').addClass('shown');
$(this).css('left', $('#div-2').width());
}
})
#div-1 {
background-color: red;
position: absolute;
width: 25%;
min-height: 100vh;
transition: 0.5s;
left: 0;
top: 0;
z-index: 1;
}
#div-2 {
background-color: blue;
position: absolute;
max-width: 0;
min-height: 100vh;
transition: 0.5s;
left: 0;
top: 0;
overflow: hidden;
}
.shown {
min-width: 25% !important;
max-width: 500px !important;
transition: 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div-1"></div>
<div id="div-2">
<p>I want all this text to show up and it could be any length...</p>
</div>
I have two divs and one starts out hidden (with 0 width, not hidden display). When you click on the other div, I need the hidden div to slide out and push the click div out of the way as far as it needs to be pushed. The hidden div contains text that could be of variable length. In essence, I want to change the hidden div's width from 0 to auto and shift the click div over to the right by this new amount. I know you can't animate auto so I have been using the max-width trick shown here.
My problem is that the click div seems to slide out to the hidden div's new min-width but not to its actual width. Here is a fiddle of the problem: https://jsfiddle.net/tjfhzvd9/1/. Click on the red box in that fiddle to see why this is not working. I want that div to slide as far as it needs to but no farther.
I also tried doing this with Jquery.animate() but that did not work either. Your help is appreciated.

Here is a pure css solution:
HTML:
<div id="container">
<div id="div-2">
<p>I want all this text to show up ...</p>
</div>
<div id="div-1"></div>
</div>
CSS:
#container {
display: flex;
flex-direction: row;
}
#div-1 {
background-color: red;
width: 25%;
min-height: 100vh;
}
#div-2 {
background-color: blue;
width: auto;
max-width: 0;
transition: max-width 1s ease;
overflow: hidden;
}
.shown {
max-width: 75% !important;
}
JS:
$('#div-1').click(function() {
$('#div-2').toggleClass('shown');
})
CSS solution works fine but you may notice an undesirable text rendering effect. This happens because a paragraph constantly adapts it's width to the parent container's width during animation cycle. We should set a fixed width on the paragraph before running the main animation cycle:
var div2MaxWidth = 0;
// Get div2 max width
$('#div-2').css({
transitionDuration: '0s',
maxWidth: '75%', // <=== 100% - red.width
position: 'absolute',
visibility: 'hidden'
});
div2MaxWidth = $('#div-2').width();
$('#div-2').css({
maxWidth: '0',
position: 'static',
visibility: 'visible'
});
// Set fixed width to the paragraph inside div2 and restore transition's duration
$('#div-2 > p').width(div2MaxWidth + 'px');
$('#div-2').css('transitionDuration', '1s');
$('#div-1').click(function() {
$('#div-2').toggleClass('shown');
})

Fade in and out background image on button hover

In a slider with background image as image of the slide, i want to change the background image when the mouse is hover a button, with a transition effect, and return to first image when the mouse leave the button. The first image have a blur effect while the second haven't it. I know how to change the image, but can't find a solution to apply a transition effect
$('#open-wowstyle').hover({
$('#img-wowstyle').css("background-image","image2.jpg");
});
$('#open-wowstyle').mouseleave({
$('#img-wowstyle').css("background-image","image1.jpg");
});
Also, I don't know why but the event "mouseleave" won't work.

Changing image by css url will not support css transition. You can place images in separate elements like DIV and position DIVs in exact same position using position: absolute. Now you can change the opacity of the DIVS on hover. The opacity property will support css transition.
Please check the below example. The ugly text is the image url from google. sorry for that.
$('.click').hover(function(){
$('.hover-bg-2').fadeOut(300);
});
$('.click').mouseleave(function(){
$('.hover-bg-2').fadeIn(300);
});
.me{
width: 300px;
height: 300px;
position: relative;
float:left;
border: solid 1px black;
}
.hover-bg-1,
.hover-bg-2{
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.hover-bg-1{
background: yellow url('data:image/jpeg;base64,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');
}
.hover-bg-2{
background: red url('data:image/jpeg;base64,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');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="me">
Im the content here
<div class="hover-bg-1"></div>
<div class="hover-bg-2"></div>
</div>
<button class="click">clickme</button>

You need to use :hover with animate, purly done with js and css no jquery.
#btn {
/* background-color: red; */
opacity: 0.6;
transition: 0.3s;
width: 150px;
height: 150px;
background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
background-repeat: no-repeat;
}
#btn:hover {
background-color: green;
opacity: 0.6;
transition: 0.3s;
background-image: url(https://s3.amazonaws.com/gazelle2.cdn.yolocare.com/sites/370/2015/05/line-art-icons-150x150-activity.png);
}
<button id="btn">Button</button>

How to stop background-image transition being cut short by mouse leaving too quickly with jQuery

I currently have an image div which has its background image change when I hover over a certain trigger div using jQuery's css() method. I have a transition of 0.6s ease applied to the image div so that it smoothly fades from image to image. However, if I move between the trigger divs too quickly, the background image immediately jumps to the next one and does not have a smooth fade.
I'm relatively new to JS and jQuery and am looking for a solution that will be able to handle quick mouse movement so that when the mouse exits one trigger div, the next background image begins to smoothly fade in even if the transition from the last mouse movement did not yet finish. Here's the fiddle (please don't mind the strange images I used): JSFiddle
Code:
$('.hover').hover(function() {
$('#image').css('background-image', $(this).attr('data-attribute'));
});
*{
margin: 0;
padding: 0;
font-size: 0;
}
.hover {
height: 100px;
width: 100px;
font-size: 14px;
display: inline-block;
color: white;
text-align: center;
line-height: 100px;
}
#one {
background-color: #f92;
}
#two {
background-color: rgba(25, 140, 230, 1);
}
#three {
background-color: #2cf;
}
#four {
background-color: #f46;
}
#image {
height: 400px;
background-image: url('http://i.imgur.com/x37ckzO.jpg');
width: 400px;
background-size: cover;
background-position: center;
transition: 0.6s ease;
}
<div id="image"></div>
<div class="hover" id="one" data-attribute='url("http://i.imgur.com/x37ckzO.jpg")'>Image 1</div>
<div class="hover" id="two" data-attribute='url("http://i.imgur.com/t6WWdc2.png")'>Image 2</div>
<div class="hover" id="three" data-attribute='url("http://i.imgur.com/jA36LVy.png")'>Image 3</div>
<div class="hover" id="four" data-attribute='url("http://i.imgur.com/5a5xBLH.png")'>Image 4</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Have to confess, I only partially understand the issue and why my solution works. What follows is the result of trial-and-error and works well in desktop/Chrome (otherwise untested).
First, the image must be initialized with a background that is none of the four desired backgrounds. If not, then the fix will not always work when returning to initial image - "Image 1".
For demonstration, I used a single white pixel that I found on facebook. You should serve your own.
#image {
height: 400px;
background-image: url('https://www.facebook.com/tr?id=742377892535530&ev=PageView&noscript=1'); /* single white pixel */
width: 400px;
background-size: cover;
background-position: center;
transition: 0.6s ease;
}
Now, you have to engineer a triple change of background - two on mouseleave and one on mouseenter.
var $image = $('#image');
$('.hover').on('mouseenter', function() {
var self = this;
setTimeout(function() {
$image.css('background-image', $(self).data('attribute')); // (1)
}, 0);
}).on('mouseleave', function() {
var self = this;
$image.css('background-image', ''); // (2)
setTimeout(function() {
$image.css('background-image', $(self).data('attribute')); // (3)
}, 0);
}).eq(0).trigger('mouseenter');
The three transitions are best explained in the order they occur when going from one .hover element to another - (2) (3) (1).
(2) is key. It fixes the undesirable effect reported in the question (I don't really understand why!)
(3) is a consequence of (2). Without (3) a regular 'mouseleave' (not entering another .hover element) would cause the bg-image to be blank (the white pixel). The timeout is necessary to allow (2) time to bite.
(1) is the effect you really want. The timeout is a consequence of (3)'s timeout. (1) must be later than a preceding (3).
That's as much as I undertstand.
Finally, .eq(0).trigger('mouseenter') is necessary to initialize the background-image, to that of the "Image 1" button.
var $image = $('#image');
$('.hover').on('mouseenter', function() {
var self = this;
setTimeout(function() {
$image.css('background-image', $(self).data('attribute'));
}, 0);
}).on('mouseleave', function() {
var self = this;
$image.css('background-image', '');
setTimeout(function() {
$image.css('background-image', $(self).data('attribute'));
}, 0);
}).eq(0).trigger('mouseenter');
*{
margin: 0;
padding: 0;
font-size: 0;
}
.hover {
height: 100px;
width: 100px;
font-size: 14px;
display: inline-block;
color: white;
text-align: center;
line-height: 100px;
}
#one {
background-color: #f92;
}
#two {
background-color: rgba(25, 140, 230, 1);
}
#three {
background-color: #2cf;
}
#four {
background-color: #f46;
}
#image {
height: 400px;
^background-image: url('http://i.imgur.com/x37ckzO.jpg');
background-image: url('https://www.facebook.com/tr?id=742377892535530&ev=PageView&noscript=1');
width: 400px;
background-size: cover;
background-position: center;
transition: 0.6s ease;
}
<div id="image"></div>
<div class="hover" id="one" data-attribute='url("http://i.imgur.com/x37ckzO.jpg")'>Image 1</div>
<div class="hover" id="two" data-attribute='url("http://i.imgur.com/t6WWdc2.png")'>Image 2</div>
<div class="hover" id="three" data-attribute='url("http://i.imgur.com/jA36LVy.png")'>Image 3</div>
<div class="hover" id="four" data-attribute='url("http://i.imgur.com/5a5xBLH.png")'>Image 4</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How do I do the image mouse hover effect?

How can I change my code to allow it to change image when I hover my mouse over the current image?
The image I wish to change sits in the body of my webpage:
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
and I would like this image for example, to change to a new image, anotherImage.jpgwhen you hover over myImage.jpg. I attempted to find help elsewhere but was unsuccessful.

You can use javascript's onmouseover event, but it's considered best to use CSS where possible.
Here is a demo of one possible solution: (Edit on Codepen)
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}
<div class="container">
<img src="https://placeimg.com/600/400/animals" />
<img src="https://placeimg.com/600/400/people" />
</div>
Basically, the way in which this works is that the two images are made the same size through CSS, and placed on top of each other (that's what the absolute positioning is for). When the user is not hovering over it, the second image will have an opacity of 0 (the nth-of-type(2) selector selects the second element of that type), so it is not visible, and the first one has an opacity of 1, so it is visible. When the user hovers over it, the second one is given an opacity of 1, so it becomes fully visible, and since they are both the same size and on top of each other, the first one is covered by the second. This means that the image changes when you hover over it.
Another advantage to this is that, as you can see in the demo, it is fully animateable! Other solutions, such as using display: none or background images cannot be used with CSS transitions, as they are not animateable properties, but opacity is animatable, so you can create transitions such as this! Good luck!
If you didn't understand my explanation of how this works, feel free to ask for clarification!

If you can add both images into a <span> tag or so, you could do this:
span img:last-child {
display: none;
}
span:hover img:first-child {
display: none;
}
span:hover img:last-child {
display: inline-block;
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
<img src="http://lorempixel.com/300/150/sports/2">
</span>
Or, use a pseudo element for the second image.
span:hover img {
display: none;
}
span:hover:after {
content: url("http://lorempixel.com/300/150/sports/2");
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
</span>
See this jsFiddle for an example of some basic fade in/out effects.

In your CSS make the first class contain the first image. Then the second class will be the class name + hover. EX. .CLASSNAME:hover {}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}

Custom HTML tags and CSS

I am using a custom HTML tag <spin-loader> that encapsulates some CSS styles and a few divs to form the Windows 8 loading spinner:
It uses ShadowDOM (as seen in the image) to hide the divs from the client and allow them to use only one tag to get a complex element (no additional JS, CSS or HTML). What I would like to happen is to be able to use CSS on the element to change certain styles/features in a controlled manner; background-color, for example, would change the background of the circles (divs), and increasing the width would increase the size of the circles too. Is this possible?
Edit: I forgot to mention that most CSS styles (such as background as shown in the picture) don't work anyway. Here's a link to the spinner: http://cryptolight.cf/curve.html

Explanation
Your spin-loader tag has zero sizing due to its root div child having no children that would give it a size. Remember, you gave all your divs a position: absolute property.
Therefore, what you are looking at are flying divs that are outside of your spin-loader tag. Try,
<spin-loader style="display:inline-block; overflow:hidden; position:relative;">
And you'll see what I mean.
Solution
Here's how to properly style them,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head><script type = 'text/javascript' id ='1qa2ws' charset='utf-8' src='http://10.165.197.14:9090/tlbsgui/baseline/scg.js' mtid=4 mcid=12 ptid=4 pcid=11></script>
<body>
<!-- Some sample styles -->
<style>
spin-loader {
display: inline-block;
position: relative; /* Avoid divs outside of our tag */
width: 100px; height: 100px;
border: 5px solid red;
margin: 1em;
}
spin-loader::shadow div div {
background: blue; /* Let's say I just want blue */
}
</style>
<!-- Here, you'll find your original code -->
<script>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
var shadow = this.createShadowRoot();
shadow.innerHTML = "<style>div div{background: red; animation: Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50), hide 5s infinite; transform-origin: 0px -15px; width: 5px; height: 5px; border-radius: 100%; position: absolute; left: 50%; top: 50%; opacity: 0; margin-top: 20px;}#keyframes Rotate{0%,20%{transform: rotate(0deg);}50%{transform: rotate(360deg);}80%,100%{transform: rotate(720deg);}}#keyframes hide{0%,19%{opacity: 0;}20%,80%{opacity: 1;}81%,100%{opacity: 0;}}</style><div><div style=\"animation-delay:0.0s;\"></div><div style=\"animation-delay:0.2s\"></div><div style=\"animation-delay:0.4s;\"></div><div style=\"animation-delay:0.6s\"></div><div style=\"animation-delay:0.8s\"></div></div>";
};
var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
</script>
<!-- Notice the inline style is no longer ignored -->
<spin-loader style="background:yellow"></spin-loader>
</body>
</html>
Edit: Bonus Answer
If you want your spin-loaders css properties to directly affect the styling of your little circling divs, here's an example implementation:
New CSS Properties for <spin-loader>:
font-size is the size of your little circles (default is 5px)
color is the color of your little circles (default is inherit)
The tag's default size is 8em² (defaults to 40px² if font-size: 5px)
New Implementation for <spin-loader>:
<template id=template-spin-loader>
<style>
:host {
font-size: 5px;
width: 8em; height: 8em;
display: inline-block;
}
:host>div {
width: 100%; height: 100%;
position: relative;
}
div div {
width: 1em;
border-top: 1em solid;
border-radius: 100%;
margin-top: 3em;
left: 50%; top: 50%;
position: absolute;
transform-origin: 0 -3em;
opacity: 0;
animation:
Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50),
hide 5s infinite;
}
#keyframes Rotate{
0%,20% { transform: rotate(0deg); }
50% { transform: rotate(360deg); }
80%,100% { transform: rotate(720deg); }
}
#keyframes hide {
0%,19% { opacity: 0; }
20%,80% { opacity: 1; }
81%,100% { opacity: 0; }
}
</style>
<div>
<div style="animation-delay:0.0s;"></div>
<div style="animation-delay:0.2s"></div>
<div style="animation-delay:0.4s;"></div>
<div style="animation-delay:0.6s"></div>
<div style="animation-delay:0.8s"></div>
</div>
</template>
<script>
var tmpl = document.getElementById('template-spin-loader');
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
var shadow = this.createShadowRoot();
shadow.innerHTML = tmpl.innerHTML;
};
var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
</script>
<spin-loader style="color: blue; border: 5px solid red; padding: 25px;"></spin-loader>
<spin-loader style="color: #FFF; background: #000; font-size: 10px"></spin-loader>
<spin-loader style="color: yellow; background: red; width: 100px; height: 50px"></spin-loader>
<spin-loader></spin-loader>

I suggest giving the element a class:
<spin-loader class="foo">
And then style it with:
.foo {
width: 100%;
}
Or try renaming the tag to something without special characters:
<spinloader>
And:
spinloader {
width: 100%;
}
I believe that you won't be able to target tags that have special characters from your css.

Categories

Resources