I'm trying to get an action to occur when one clicks on an image, however only when the image is at full opacity
function func() {
if ($('.Absolute-Center').css('opacity') == 1) {
alert("it works");
}
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
img.Absolute-Center {
opacity: 0.05;
filter: alpha(opacity=5);
-webkit-transition: opacity 20s linear;
}
img.Absolute-Center:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 20s linear;
}
<img src="picture.png" class="Absolute-Center" onclick="func()" />
Try using transitionend event , .addClass() , .removeClass() ; removing :hover from css
function func(e) {
if ($(this).css("opacity") == 1) {
alert("it works");
$(this).removeClass("clicked")
}
};
$(".Absolute-Center").on({
"click": function() {
$(this).addClass("clicked")
},
"transitionend": func
})
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
img.Absolute-Center {
opacity: 0.05;
filter: alpha(opacity=5);
transition: opacity 20s linear;
}
img.Absolute-Center.clicked {
opacity: 1;
filter: alpha(opacity=100);
transition: opacity 20s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<img src="http://lorempixel.com/50/50" class="Absolute-Center" />
This should help improve understanding and should be easily adaptable to do exactly what you want.
$(function() {
$('img').on('click', function() {
var alpha = $(this).css('opacity');
$("#msg").text((alpha == 1) ? "full" : alpha);
}).on('transitionend', function() {
var alpha = $(this).css('opacity');
if (alpha == 1) {
$("#msg2").fadeIn().delay(700).fadeOut();
} else {
$("#msg3").fadeIn().delay(700).fadeOut();
}
});
});
img {
border: 1px solid #000;
}
img {
opacity: 0.05;
filter: alpha(opacity=5);
-webkit-transition: opacity 5s linear;
}
img:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 5s linear;
}
#msg2, #msg3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="picture.png" />
<div>Last clicked at opacity: <span id="msg"></span>
</div>
<div id="msg2">End of fade-IN transition</div>
<div id="msg3">End of fade-OUT transition</div>
Related
when i use this code it change the background color yo yellow in one time and i want to change the color one by one red then blue then green and so on.....thanks in advance
var colorss = ["red", "blue", "green","maroon","yellow"];
for (i=0;i<colorss.length;i+=1) {
document.body.setAttribute('style',"background-color:" + colorss[i]);
}
Is this what you mean?
jQuery(function($) {
function changeColor(selector, colors, time) {
var curCol = 0,
timer = setInterval(function() {
if (curCol === colors.length) curCol = 0;
$(selector).css("background-color", colors[curCol]);
curCol++;
}, time);
}
$(window).load(function() {
changeColor(".container", ["green", "yellow", "blue", "red"], 3000);
});
});
.container {
background-color: red;
height: 500px;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-khtml-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"></div>
OR
using CSS only:
html,
body {
height: 100%;
}
body {
-webkit-animation: background 5s cubic-bezier(1, 0, 0, 1) infinite;
animation: background 5s cubic-bezier(1, 0, 0, 1) infinite;
}
#-webkit-keyframes background {
0% {
background-color: #f99;
}
33% {
background-color: #9f9;
}
67% {
background-color: #99f;
}
100% {
background-color: #f99;
}
}
#keyframes background {
0% {
background-color: #f99;
}
33% {
background-color: #9f9;
}
67% {
background-color: #99f;
}
100% {
background-color: #f99;
}
}
Your code is correct, but the computer computes faster than you can see or the webpage can load.
also you have an s too much in colors document.body.setAttribute('style',"background-color:" + colors[i]);
here is working code if you want to see the loop
var colors = ["red", "blue", "green","maroon","yellow"];
let body = document.getElementById('body');
var i = 0;
function myLoop () {
setTimeout(function () {
document.body.setAttribute('style',"background-color:" + colors[i]);
i++;
if (i < colors.length) {
myLoop();
}
}, 1500) /*1.5 seconds*/
}
myLoop();
<body>
<h1>hello</h1>
</body>
After reading those two questions:
How To Add CSS3 Transition With HTML5 details/summary tag reveal?
How to make <'details'> drop down on mouse hover
I have a new one for you!
Problem
I want an animation on closing event of the <details> tag. I thought that just revert the animation of opening would do the job, but unfortunately, no.
$(function() {
$('details').on('mouseover', function() {
$(this).attr('open', true);
}).on('mouseout', function() {
$(this).attr('open', false);
}).on('click', function(e) {
e.preventDefault();
})
});
details[open] SUMMARY~* {
animation: sweepin .5s ease-in-out;
}
details[close] SUMMARY~* {
animation: sweepout .5s ease-in-out;
}
#keyframes sweepin {
0% {
opacity: 0;
margin-left: -10px
}
100% {
opacity: 1;
margin-left: 0px
}
}
#keyframes sweepout {
0% {
opacity: 1;
margin-left: 0px
}
100% {
opacity: 0;
margin-left: -10px
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<details>
<summary>Here my little summary</summary>
<p>... Do you want more details?</p>
<p>Here have some details!</p>
</details>
Question
Do you think this is possible?
You can substitute toggling .className for details[close] selector; at mouseover event check if element is not .open, if true, set property to .open = true at mouseout event add .className, use .one() animationend event to remove .className and set .open to false at event handler.
$(function() {
$("details").on({
mouseover: function() {
if (!this.open && !$(this).is(".close"))
$(this).prop("open", true)
.one("animationend", function() {
$(this).addClass("animationDone")
})
},
mouseout: function _close() {
if (!$(this).is(".close") && $(this).is(".animationDone"))
$(this).addClass("close")
.one("animationend", function() {
$(this).prop("open", false)
.removeClass("close animationDone")
})
},
click: function(e) {
e.preventDefault();
}
})
});
details[open] SUMMARY~* {
animation: sweepin .5s ease-in-out;
}
details.close SUMMARY~* {
animation: sweepout .5s ease-in-out;
}
#keyframes sweepin {
0% {
opacity: 0;
margin-left: -10px
}
100% {
opacity: 1;
margin-left: 0px
}
}
#keyframes sweepout {
0% {
opacity: 1;
margin-left: 0px
}
100% {
opacity: 0;
margin-left: -10px
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<details>
<summary>Here my little summary</summary>
<p>... Do you want more details?</p>
<p>Here have some details!</p>
</details>
Sorry for change the logic, but I've found this faster and fluid.
$(function() {
$('#summary').on('mouseover', function() {
$('#triangleDown').fadeIn(0);
$('#triangle').fadeOut(0);
$('#content').addClass("open");
}).on('mouseout', function() {
$('#triangleDown').fadeOut(0);
$('#triangle').fadeIn(0);
$('#content').removeClass("open");
})
});
#triangleDown{
display:none;
}
span{
font-size: 12px;
}
#content{
opacity:0;
margin-left: 0px;
-webkit-transition:all 1s;
transition:all 1s;
}
#content.open{
opacity: 1;
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="summary"><span id="triangle">► </span><span id="triangleDown">▼ </span>Here my little summary</p>
<div id="content">
<p>... Do you want more details?</p>
<p>Here have some details!</p>
</div>
</div>
You can use an animation-fill-mode property to keep the original position of the div after animation is completed. On mouseover and mouse out event, you can add and remove the open and close attribute.
See snippet below
$(function() {
$('details').on('mouseover', function() {
$(this).attr('open', true);
$(this).removeAttr('close', false);
}).on('mouseout', function() {
$(this).attr('open', false);
$(this).removeAttr('open', false);
$(this).attr('close', true);
}).on('click', function(e) {
e.preventDefault();
})
});
details[open] SUMMARY~* {
animation: sweepin .5s ease-in-out;
animation-fill-mode:forwards;
}
details[close] SUMMARY~* {
animation: sweepout .5s ease-in-out;
animation-fill-mode:forwards;
}
#keyframes sweepin {
0% {
opacity: 0;
margin-left: -10px
}
100% {
opacity: 1;
margin-left: 0px
}
}
#keyframes sweepout {
0% {
opacity: 1;
margin-left: 0px;
}
100% {
opacity: 0;
margin-left: -10px
}
}
details{
border:solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br>
<details>
<summary>Here my little summary</summary>
<p>... Do you want more details?</p>
<p>Here have some details!</p>
</details>
In my html body I am using a javascript that writes and changes a line of text in my div, with ID "moto", every 5 seconds.
var text = ["TEXT 1","TEXT 2","TEXT 3","TEXT 4"];
var counter = 0;
var elem = document.getElementById("moto");
ChangeFunction();
setInterval(ChangeFunction, 5000);
function ChangeFunction() {
elem.innerHTML = text[counter];
counter++;
if(counter >= text.length) { counter = 0; }
}
#moto{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div id="moto"></div>
Do I need to apply some java fade-in fade-out? I would rather use CSS...
You can use jquery to do this easily as below
var text = ["TEXT 1","TEXT 2","TEXT 3","TEXT 4"];
var counter = 0;
var elem = document.getElementById("moto");
ChangeFunction();
setInterval(ChangeFunction, 5000);
function ChangeFunction() {
var moto = text[counter++];
$(elem).fadeOut('slow', function() {
$(elem).html(moto);
$(elem).fadeIn('slow');
});
if(counter >= text.length) { counter = 0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="moto"></div>
You don't need JavaScript at all. Here's a pure CSS implementation:
#keyframes fade {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#moto {
position: relative;
}
#moto div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: fade 4s 0s infinite alternate-reverse;
}
#moto :nth-child(1) {
animation-delay: -2s;
}
#moto :nth-child(2) {
animation-delay: 0s;
}
#moto :nth-child(3) {
animation-delay: 2s;
}
#moto :nth-child(4) {
animation-delay: 4s;
}
<div id="moto">
<div>TEXT 1</div>
<div>TEXT 2</div>
<div>TEXT 3</div>
<div>TEXT 4</div>
</div>
I'm working on a slideshow and it works, except for the animations. The animation for sliding out works fine but the animation for sliding in from the left does not. The left margin gets set to 0% but there is no animation, even though it is set to -100% at first.
Javascript:
var images = [
'http://i.imgur.com/ByyUANz.png',
'http://i.imgur.com/S5FfOOB.png',
'http://i.imgur.com/EuefPdv.png',
'http://i.imgur.com/Ucvm4pJ.png',
'http://i.imgur.com/pK5WBHN.png',
'http://i.imgur.com/nuOLVpy.png'
]
function slideShow(startAt){
var holder = document.getElementById("currentImage");
var img = document.createElement("img");
img.src = images[startAt];
holder.appendChild(img);
nextPicture(startAt, img);
}
function nextPicture(current, currentElement){
var holder = document.getElementById("currentImage");
setTimeout(function(){
currentElement.className = "translateLeft";
current += 1;
var img = document.createElement("img");
img.src = images[current];
img.style.marginLeft = "-100%";
holder.appendChild(img);
img.className = "translateIn";
if (current == 5){
current = -1;
nextPicture(current, img);
} else {
nextPicture(current, img);
}
}, 5000)
}
slideShow(0);
CSS:
.translateLeft {
transition: 3s;
margin-left: 100% !important;
}
.translateIn {
transition: 3s;
margin-left: 0% !important;
}
Here is a solution for you.
https://jsfiddle.net/smaefwrp/2/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body,
img {
position: absolute;
top:0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}
#currentImage {
height: 100%;
width: 1920px;
}
.translateOrigin {
transition: none;
transform: translate3d(-100%, 0, 0) !important;
}
.translateLeft {
transition: transform 3s;
transform: translate3d(100%, 0, 0) !important;
}
.translateIn {
transition: transform 3s;
transform: translate3d(0, 0, 0) !important;
}
</style>
</head>
<body>
<div id="currentImage">
</div>
<div id="buttons">
</div>
<script type="text/javascript">
var images = [
'http://i.imgur.com/ByyUANz.png',
'http://i.imgur.com/S5FfOOB.png',
'http://i.imgur.com/EuefPdv.png',
'http://i.imgur.com/Ucvm4pJ.png',
'http://i.imgur.com/pK5WBHN.png',
'http://i.imgur.com/nuOLVpy.png'
];
var imageEle = [];
var currImage = 0;
var holder = document.getElementById("currentImage");
function imagesPreload() {
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i];
img.className = "translateOrigin";
holder.appendChild(img);
imageEle.push(img);
}
}
imagesPreload();
document.onkeydown = function(event){
if(event.keyCode === 13) {
nextPicture();
}
};
function slideShow(startAt) {
var holder = document.getElementById("currentImage");
imageEle[currImage].className = "translateIn";
nextPicture();
}
function nextPicture() {
setTimeout(function () {
var img = imageEle[currImage];
img.addEventListener("transitionend", transitionEnd, false);
img.className = "translateLeft";
if (currImage == 5) {
currImage = 0;
} else {
currImage++;
}
imageEle[currImage].className = "translateIn";
/* Reset the image to original position */
function transitionEnd() {
img.className = "translateOrigin";
img.removeEventListener("transitionend", transitionEnd, false);
nextPicture();
}
}, 5000)
}
slideShow(currImage);
</script>
</body>
</html>
To create a nice slideshow I suggest to use css transform property rather than the margin. The idea is to create the placeholder element currentImage with relative position, and then create all images inside it with position set to absolute. Then by default all images are translated out of the placeholder element, and adding/removing classes show and hide you can place them inside the view and then outside of it, like this:
var images = [
'http://i.imgur.com/ByyUANz.png',
'http://i.imgur.com/S5FfOOB.png',
'http://i.imgur.com/EuefPdv.png',
'http://i.imgur.com/Ucvm4pJ.png',
'http://i.imgur.com/pK5WBHN.png',
'http://i.imgur.com/nuOLVpy.png'
];
// Get the holder
var holder = document.getElementById("currentImage");
// Create the images
images.forEach(function(url) {
var img = document.createElement("img");
img.src = url;
holder.appendChild(img);
});
// Image counter
var counter = 0;
// Slide show interval
var slideshow = setInterval(function() {
// When we reach the end of images we shut down the slide show
// or you can reset the counter to start over
if(counter === images.length) {
clearInterval(slideshow);
return;
}
// Get all images
var nodes = holder.getElementsByTagName("img");
// Hide previous image
if(nodes[counter - 1]) {
nodes[counter - 1].className = "hide";
}
// Show next image
nodes[counter].className = "show";
counter++;
}, 2500);
#currentImage {
background: gray;
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#currentImage img {
width: 100%;
position: absolute;
transform: translateX(-110%);
-webkit-transition: -webkit-transform 1.0s ease 0s;
-moz-transition: -moz-transform 1.0s ease 0s;
-o-transition: -o-transform 1.0s ease 0s;
transition: transform 1.0s ease 0s;
}
#currentImage img.show {
transform: translateX(0%);
}
#currentImage img.hide {
transform: translateX(110%);
}
<div id="currentImage">
</div>
You can try something like:
// HTML
<div id="currentImage">
<div class="window">
<div class="image-list">
<div>
<img src="http://i.imgur.com/ByyUANz.png" />
</div>
<div>
<img src="http://i.imgur.com/S5FfOOB.png" />
</div>
<div>
<img src="http://i.imgur.com/EuefPdv.png" />
</div>
<div>
<img src="http://i.imgur.com/Ucvm4pJ.png" />
</div>
<div>
<img src="http://i.imgur.com/pK5WBHN.png" />
</div>
<div>
<img src="http://i.imgur.com/nuOLVpy.png" />
</div>
</div>
</div>
</div>
And CSS
// CSS
img {
height: 50px;
width: 50px
}
.window {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid red;
overflow: hidden
}
div {
display: inline-block
}
.image-list {
list-style-type: none;
display: inline-block;
padding-left: 0px;
margin: 0px;
width: 350px;
animation: slidingli 30s ;
}
#keyframes slidingli {
0% {
transform: translateX(0px)
}
16% {
transform: translateX(-50px)
}
32% {
transform: translateX(-100px)
}
48% {
transform: translateX(-150px)
}
64% {
transform: translateX(-200px)
}
80% {
transform: translateX(-250px)
}
100% {
transform: translateX(-300px)
}
}
Checkout this fiddle. Also there are many libraries out there which provide what need For example: http://fotorama.io/customize/autoplay/
I'm creating a sort of notification system inside my webpage with vue.js
All works fine but i want to remove the element after the transition is completed.
I only get this to work with an setTimeout but that is not the ideal method
Working jsfiddle:
http://jsfiddle.net/yMv7y/1073/
This is my code:
Vue:
Vue.transition('notification', {
enter: function(el) {
app.notifications.pop();
},
leave: function(el) {
setTimeout(function(){
el.remove();
},5000);
},
});
Vue.component('notification', {
template: '<div class="notification" v-class="red: !success, green: success" v-transition="notification"><p>{{message}}</p></div>',
data: function() {
return {
success: true,
message: '',
};
},
});
var app = new Vue({
el: 'body',
data: {
notifications : [
]
},
ready: function() {
self = this;
var data = {
'message': 'Thank you',
'success': true
};
self.notifications.push(data);
},
});
Html:
<div id="notifications-wrapper">
<notification id="notification"
v-repeat="notifications"
>
</notification>
</div>
CSS
#notifications-wrapper
{
position: fixed;
z-index: 99;
top: 0;
left: 80%;
overflow: visible;
}
.notification
{
position: relative;
z-index: 100;
overflow: hidden;
width: 250px;
margin-top: 20px;
transform: translate(20px, 0);
animation-fill-mode: forwards;
transition: 1s;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
background-color: grey;
}
p
{
margin: 10px 20px;
color: $white;
}
.notification-transition
{
animation-delay: 0s, 4.5s;
animation-duration: 4.5s, 0.5s;
animation-name: slide-in-out, hide-notification;
}
#keyframes slide-in-out
{
0%
{
transform: translate(20px, 0);
}
10%
{
transform: translate(-270px, 0);
}
90%
{
transform: translate(-270px, 0);
opacity: 1;
}
100%
{
transform: translate(20px, 0);
opacity: .5;
}
}
#keyframes hide-notification {
1% {
height: auto;
margin-top: 20px;
}
100% {
height: 0;
margin: 0;
}
}
Problem: You tried to remove el during the transition(leave function) so you got error without setTimeout.
Solution: You have to use afterLeave function. Change leave function to afterLeave function.
afterLeave: function(el) {
el.remove();
}
Jsfiddle