Develop Reference

problem on onclick() event for more than one clicks done on a div

i have an html page where,when hovered over the first image a second image fades in/is shown.The first image has an onclick() event which performs a transition of rotating the image and scaling it by some number.During the transition, the first image disappears and some text appears on the same place(area of the div tag of the first image).I perform the transition through javascript and the hovering animation using css. Now when i click on the text(or the area of the div tag) the transition must reverse back i.e., the div area must be as it was before clicking(even with the hovering working.). I would like to know the answer through pure javascript please.
Thank you in advance.
timesclicked = 0;
document.getElementById("hoverImage").addEventListener("click", function()
{
var x = document.getElementById('container');
timesclicked+=1;
if(timesclicked%2!=0)
{
//obj.style.opacity = '0.5';
x.style.transform = 'rotateZ(-360deg) scale(1.4)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<div style="font-size:16px; font-family: monospace; font-weight:bold; text-align:center; "> My Hero Academia, abbreviated as HeroAca is a Japanese superhero manga series written and illustrated by Kōhei Horikoshi. It has been serialized in Weekly Shōnen Jump since July 2014, and, as of February 2019, 22 volumes have been collected in tankōbon format.</div>'},'1300');
}
else
{
x.style.transform = 'rotateZ(-45deg) scale(1)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<img src="https://picsum.photos/300">'},'500');
}
});
img
{
width: 300px;
height: 300px;
}
#mainImage,#hoverImage
{
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage
{
opacity: 0;
transition: opacity 0.4s 0.1s ;
}
#hoverImage:hover
{
opacity: 1;
}
#container
{
background: url(https://picsum.photos/300);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
}
#container:before
{
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="container" >
<img id="mainImage" src="https://picsum.photos/300">
<img id="hoverImage" src="https://picsum.photos/300">
</div>
As much as i know, I think the second clicking event is not happening because the eventlistener is on the hoverImage. I need a way to run the else part of the code somehow.

It looks like there are a few problems with your code, and you're going to have some debugging to do. That said, try this for a strategy:
Put your on-click event on the #container.
Put all the styling and transitioning details in the css. Your javascript will just add and remove a class from the #container.
Don't track the number of clicks unless you need it for something else. Have your if statement check for the presence or absence of the class you're toggling. (Or use an explicit toggle instead of an if-else block.)
Don't add and remove the text and background in the javascript, put them both in the HTML and control their visibility using the CSS.
edit:
People asked for examples and clarification. I'm stealing some of this from other people's answers.
I'm not completely sure I've understood OP's intentions correctly, and there are some rough-around-the-edgues details (like the cursor when you hover before clicking), but I think this should serve as an example:
let container = document.getElementById("container");
container.addEventListener("click", function(){
container.classList.toggle("selected");
});
#mainImage, #hoverImage, #selectedText {
width: 300px;
height: 300px;
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage {
opacity: 0;
transition: opacity 0.4s 0.1s;
}
#container:hover > #hoverImage {
opacity: 1;
}
#container {
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
transition: all 1.5s ease-in-out;
}
#container.selected {
transform: rotateZ(-360deg) scale(1.4);
}
#container:before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
#selectedText {
font-size:16px;
font-family: monospace;
font-weight:bold;
text-align:center;
background: url(https://picsum.photos/300?text);
background-size: cover;
opacity: 0;
transition: opacity 0.1s 0.5s;
}
#container.selected > #selectedText {
opacity: 1;
transition: opacity 0.1s 1.3s;
}
<div id="container">
<img id="mainImage" src="https://picsum.photos/300?main">
<img id="hoverImage" src="https://picsum.photos/300?hover">
<div id="selectedText">
My Hero Academia, abbreviated as HeroAca is a Japanese superhero
manga series written and illustrated by Kōhei Horikoshi. It has been
serialized in Weekly Shōnen Jump since July 2014, and, as of
February 2019, 22 volumes have been collected in tankōbon format.
</div>
</div>

you can add the click event listener on the container div.
timesclicked = 0;
document.getElementById("container").addEventListener("click", function()
{
var x = document.getElementById('container');
timesclicked+=1;
if(timesclicked%2!=0)
{
//obj.style.opacity = '0.5';
x.style.transform = 'rotateZ(-360deg) scale(1.4)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<div style="font-size:16px; font-family: monospace; font-weight:bold; text-align:center; "> My Hero Academia, abbreviated as HeroAca is a Japanese superhero manga series written and illustrated by Kōhei Horikoshi. It has been serialized in Weekly Shōnen Jump since July 2014, and, as of February 2019, 22 volumes have been collected in tankōbon format.</div>'},'1300');
}
else
{
x.style.transform = 'rotateZ(-45deg) scale(1)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<img src="https://picsum.photos/300">'},'500');
}
});
img
{
width: 300px;
height: 300px;
}
#mainImage,#hoverImage
{
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage
{
opacity: 0;
transition: opacity 0.4s 0.1s ;
}
#hoverImage:hover
{
opacity: 1;
}
#container
{
background: url(https://picsum.photos/300);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
}
#container:before
{
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="container" >
<img id="mainImage" src="https://picsum.photos/300">
<img id="hoverImage" src="https://picsum.photos/300">
</div>
</style>

if I understand your problem correctly, I think you just need to move the transition styles into your CSS
x.style.transition = 'all 1.5s ease-in-out';

onClick add/remove class inside loop is not working in jquery

I'm working on flexslider here onClick next I want to add class it is working but randomly click is coming when I first click class added then on second click not coming third click coming so on. I want to add a class every click. Here might be the problem in if()
$('.flex-next').on('click', function() {
if ($('.timeline span').hasClass('clicked')) {
$('.timeline span.clicked').removeClass('clicked');
$(this).addClass('clicked');
} else {
$('.timeline span').removeClass('clicked');
$('.timeline span').addClass('clicked');
}
});
.timeline {
content: '';
background-color: rgba(255, 255, 255, 0.52);
display: block;
width: 100px;
height: 2px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
}
.timeline span:before {
position: absolute;
left: 0;
top: -1px;
content: '';
background-color: red;
display: block;
height: 3px;
animation: yourAnimation 1s 0s linear;
}
.timeline span.clicked {
position: absolute;
left: 0;
top: -1px;
content: '';
background-color: blue;
display: block;
height: 3px;
animation: yourAnimation 1s 0s linear;
}
#keyframes yourAnimation {
0% {
width: 0;
}
50% {
width: 50%;
}
82% {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-next">Click here</div>
<span class="timeline">
<span></span>
</span>

You can acheive the required functionality as
$('.flex-next').on('click', function(){
if (! ($('.timeline span').hasClass('clicked')) ) {
$('.timeline span').addClass('clicked');
setTimeOut(function(){
$('.timeline span').removeClass('clicked');
} , 200)
}
});

To add/remove a class on click, it is better to use jquery toggleClass function.
Moreover you may need to execute the click event after the document is loaded correctly
$( document ).ready(function() {
$('.flex-next').on('click', function(){
$('.timeline span').toggleClass( "clicked" );
});
});
For more info, you may refer to: http://api.jquery.com/toggleclass/

jQuery mouseover and mouseout not functioning as desired

Im having an issue where jquery mouseover and mouseout do not work with the css function..
I am trying to have transition effects for buttons on an image slider.
My HTML Code:
<div id="hero">
<div id="next">
<img class="nxt" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/next.png"/>
</div>
<!--END--Next-->
<div id="prev">
<img class="prv" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/prev.png"/>
</div>
<!--END--Prev-->
<div id="slider">
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide1.png"/>
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide2.png"/>
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide3.png"/>
</div>
<!--END--Slider-->
</div>
<!--END--Hero-->
My CSS Code:
#hero {
width: 944px; height: 360px;
position: relative;
margin: auto;
}
#slider {
width: 944px; height: 360px;
position: absolute;
overflow: hidden;
}
#next {
position: absolute;
top: 250px;
right: 15px;
z-index: 99;
cursor: pointer;
opacity: 0.3;
}
#prev {
position: absolute;
top: 250px;
left: 15px;
z-index: 99;
cursor: pointer;
opacity: 0.3;
}
and finally my JS Code:
$(function () {
$("#hero").mouseover(function () {
$this = $(this);
$this.find("#next").css(
"transition":"all 0.2s ease-in",
"opacity":"1"
);
}).mouseout(function () {
$this = $(this);
$this.find("#next").css(
"transition":"all 0.2s ease-out",
"opacity":"0.3"
);
});
});
Please bare in mind i am new to javascript and jquery so any help is much appreciated.

Try mouseleave function.
$(function(){
$("#hero").mouseover(function () {
$this = $(this);
$this.find("#next").css({
"transition":"all 0.2s ease-in",
"opacity":"1"
});
}).mouseleave(function () {
$this = $(this);
$this.find("#next").css({
"transition":"all 0.2s ease-out",
"opacity":"0.3"
});
});
});

I've put your code in a Fiddle. This won't work.
Then I cleaned it up a bit and got rid of some syntax errors here and voila: it works.
Note: If you're only going to change the opacity, you better do it with just CSS:
#next{
opacity: 0.3;
transition: all 0.2s;
transition-timing-function: ease-out;
}
#hero:hover #next{
opacity: 1;
transition-timing-function: ease-in;
}
/*DON'T FORGET TO PREFIX THE TRANSITION-ATTRIBUTES*/

How to slide in video and auto play at the same time with jQuery?

I would like to slide a video in from the left on click of a button and auto play at the same time. In my jsfiddle I've used a youtube video but in my site I will be using HTML5 video.
I've tried using the following code but the video comes up with an error when it should be auto playing. I want the video to then pause when it slides back out on click.
So slide in from left- play, slide out to left - pause.
HTML
<div class="wrapper">
<div class="content-wrapper"
Play Video
</div>
<div class="full-video">
<iframe id="video" src="//www.youtube.com/embed/vIu85WQTPRc" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 400px;
position: absolute;
overflow: hidden;
margin: 0;
padding:0;
z-index: 1;
}
.content-wrapper {
position: absolute;
z-index: 999;
background: red;
bottom: -90px;
width: 100%;
-webkit-transition: bottom 1s;
-moz-transition: bottom 1s;
transition: bottom 1s;
}
#play-video {
position: absolute;
background-color: blue;
z-index: 999;
cursor: pointer;
}
.full-video {
position: absolute;
left: -600px;
z-index: 1;
width: 100%;
height: 100%;
-webkit-transition: left 1s;
-moz-transition: left 1s;
transition: left 1s;
}
.full-video iframe {
width: 100%;
height: 100%;
}
JS
var clicked=false;
$("#play-video").on('click', function(){
if(clicked)
{
clicked=false;
$(".full-video").css({"left": "-600px"});
$("#video")[0].src += "&autoplay=1";
ev.preventDefault();
}
else
{
clicked=true;
$(".full-video").css({"left": "0"});
$("#video")[0].src += "&autoplay=0";
ev.preventDefault();
}
});
Here are some jsfiddle's
Just slide in … http://jsfiddle.net/8ZFMJ/58/
Slide in and code from above… http://jsfiddle.net/8ZFMJ/59/
Any help would be appreciated.

Demo Fiddle
You werent using a correctly formed querystring, you were starting it with an ampersand (&) not a ?, in addition, you were setting autoplay=0/1 the wrong way around.
Updated jQuery:
var clicked=false;
var src=$("#video")[0].src;
$("#play-video").on('click', function(){
if(clicked)
{
clicked=false;
$(".full-video").css({"left": "-600px"});
$("#video")[0].src = src;
ev.preventDefault();
}
else
{
clicked=true;
$(".full-video").css({"left": "0"});
$("#video")[0].src = src+"?autoplay=1";
ev.preventDefault();
}
});

css for fading overlaid video controls?

In some DVD/Video players, the controls for play/pause/volume/etc are overlaid on top of the video itself in a box. The controls fade in when you move the mouse, and then, after some delay, fades back out (so you can enjoy the video again).
I am wondering -- how to create this effect using CSS? Is there a way to reset the fade-out timer on events other than body mouse move?

Let's say we have the following HTML template:
<div class="player">
<div class="controls">Controls go here</div>
</div>
It is possible if you use CSS transition-delay: http://jsfiddle.net/teddyrised/7sBwA/
.player {
background-color: #333;
position: relative;
width: 100%;
height: 400px;
}
.controls {
background-color: rgba(0,0,0,.5);
border-radius: 5px;
color: #eee;
padding: 1em;
position: absolute;
left: 2em;
right: 2em;
bottom: 2em;
text-align: center;
pointer-events: none;
opacity: 0;
transition: opacity .5s ease-in-out;
transition-delay: 0;
}
.player:hover .controls {
pointer-events: auto;
opacity: 1;
}
.player:not(:hover) .controls {
transition-delay: .5s;
}
However, if you want better browser support, you should use JS instead.
When using jQuery, you can exploit the .delay() method when using jQuery effects, such as .fadeOut() in our example: http://jsfiddle.net/teddyrised/g7kge/
JS:
$(document).ready(function(){
$(".player .controls").hide();
$(".player").hover(
function(){
// Mouse enters. Fade in controls
$(this).find(".controls").fadeIn();
},
function(){
// Mouse leaves. Delay controls fade out by 1000ms
$(this).find(".controls").delay(1000).fadeOut();
});
});

It is possible to control the fade-out timer using CSS with:
-(prefix)-transition: all <duration> ease-out <delay>;
Take a look at this fiddle.