how to make transition of stacked Divs. in JavaScript - javascript

i am trying to make "memory game" using html5, CSS3 and JS. I have completed the view and model part of this game and now trying to make the Controller. What i want is call a function i.e. flip in JS and want that function to perform transition instead of using hover effect of CSS3. Basically i am trying to follow this approach. I checked that flipping in css3 using hover as can be seen in sass code below, but for the game, the user decides where to click. For simplicity, i have concised the code in html5 since it repeats for all other divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
and the SASS code for css
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
and JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
Note: the link, above, is trying to pass id to JS function where the transition takes place. Exactly same is being done here, just to get input from user instead of just hovering, but nothing happens! I copy/pasted the link code in my editor and smooth transitions are performed but when it comes of my code, nothing! Could you tell me where is my flaw?

Change your CSS from the hover state to a class, for iunstance change .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
And now, on click, add this class to the element clicked:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
fiddle
this function in javascript would be
function change(element) {
element.className = element.className + " hovered";
}
provided that you send the element in the function call
onclick="change(this)"
fiddle - function set only in the first div

Related

How do I fade 2 images with jQuery on mouseenter and mouseleave?

I have a custom button (code below). I want it to:
rotate quickly 360 on mouseenter (currently working fine)
fade quickly to a darker image on mouseenter (also currently working fine)
NOT un-rotate on mouseleave (currently working fine)
I can't yet figure out how to:
fade back to the original image on mouseleave (not working yet)
I have tried so many variations of jQuery including .hover, .fadeToggle, fadeIn, fadeOut as well as animate but none have seemed to work for me.
Am I missing something really simple and obvious?
NOTE: I have just used the Apple logo for demonstration here. If I can get the 'fade back on mouseleave' working I can just transfer it to my real life situation.
var thevalue = 1;
$("div.main").mouseenter(function() {
thevalue = thevalue + 1;
if (thevalue % 2 == 0) {
$(this).addClass("myopacity");
} else {
$(this).removeClass("myopacity");
}
$(this).addClass("change").delay(500).queue(function() {
$(this).removeClass("change").dequeue();
});
});
div.main {
width: 100px;
height: 100px;
}
div.main img {
width: 100%;
height: 100%;
}
.change {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: .5s;
}
.myopacity {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
</body>
</html>
Thanks in advance!
is this what you want. hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.main{
width: 100px;
height: 100px;
}
div.main img{
width: 100%;
height: 100%;
}
.change{
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: 5s;
}
</style>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
<script type="text/javascript">
var thevalue = 1;
$("div.main").mouseenter(function(){
$(this).addClass("change").fadeTo('fast',0.7).delay(5000).queue(function(){
$(this).removeClass("change").fadeTo('slow',1.0).dequeue();
});
});
</script>
</body>
</html>
I'm not 100% certain what you are after... I think this is close. Rotates 360° and opacity dims to 60%, then rotates back to 0° and full opacity.
No clue why you even needed the opacity class or the associated jQuery for it.
$("div.main").hover(
function() {
$(this).addClass('change').addClass('myopacity');
},
function() {
$(this).removeClass('myopacity')
});
body { padding: 40px; }
div.main {
width: 100px;
height: 100px;
opacity: 1;
transition: all .5s;
transition: all .5s;
background: url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg) no-repeat center center;
background-size: cover;
}
div.main img {
width: 100%;
height: 100%;
}
.main.change {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
transition: all .5s;
background: url(https://image.freepik.com/free-icon/windows-8-logo_318-40228.jpg) no-repeat center center;
background-size: cover;
}
.change.myopacity {
opacity: .6; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
</div>
<p id="dis"></p>
</body>
</html>
If you want the images in the actual HTML, then you can use the jQuery hover function to alter the image sources.
Found it.
Trying to manage two transitions on the exact same element was making it too complicated.
I ended up having to add one class to the img element and another to the div element. The img element now manages the rotation and the div element manages the fade through simple CSS :hover transitions.
This makes the jQuery much more simple.
See updated code below:
$("div.main").mouseenter(function() {
$(".image").addClass("change").delay(500).queue(function() {
$(".image").removeClass("change").dequeue();
});
});
// jQuery now much more simple. No need for variables or the if/else statement
div.main {
width: 100px;
height: 100px;
-webkit-transition: all .5s ease-in;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-in;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-in;
-o-transition: all .5s ease-out;
}
/* This will take care of the fade transition on :hover */
div.main img {
width: 100%;
height: 100%;
}
.change {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: .5s;
}
/* .myopacity {
opacity: 0.6;
} */
/* The .myopacity class is no longer necessary as it's taken care of through the div.main:hover class below */
div.main:hover, div.main:active, div.main:focus {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" class="image">
</div>
<p id="dis"></p>
</body>
</html>
Kind of cheated with not using jQuery for the fade transition (as originally hoped for) but this works equally as well!

implementing flipcard on click instead of on hover

I have implemented a css flipcard effect, which works on hover using css. See css code below. However I want to implement the flipcard effect on click by using jQuery. I have tried everything but cannot figure it out.
Here is the javascript that I thought would work.
$('.flip-container .flipper').click(function(){
$(this).css('transform, rotateY(180deg)');
});
Please see below for code that works with hover.
html
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
css
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
To make this work you need to remove the :hover rule on the .flip-container element in your CSS:
/* .flip-container:hover .flipper, */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
Then in your JS you need to toggle the hover class when the element is clicked instead:
$('.flip-container .flipper').click(function() {
$(this).closest('.flip-container').toggleClass('hover');
$(this).css('transform, rotateY(180deg)');
});
Working example
Note that it may also be worth changing the class name from hover now too, otherwise it may get confusing when you come to maintain the code at a later date
what you need to do is to change your css from being triggered on :hover pseudo element to a class which you need to toggle via jquery.
css
/* flip the pane when clicked */
.flip-container .flipper.flip {
transform: rotateY(180deg);
}
JS
$('.flip-container .flipper').click(function(){
$(this).toggleClass("flip");
});
here is a working Fiddle

JS animation spin on hover

This is my first question on stackoverflow.
Wondering if anyone can point me to a solution/resource on animating buttons using JS/JQuery.
Particularly, the animation I can't figure out is spinning a circular button 180 degrees on hover.
Thanks :)
You can use css keyframes
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 1s infinite; /* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
/* Standard syntax */
#keyframes mymove {
from { transform: rotateY(0deg);}
to { transform: rotateY(360deg);
}
you can animate buttons using CSS.
At http://www.w3schools.com/css/css3_animations.asp you can learn about CSS animations. You may also want to learn about CSS transitions at http://www.w3schools.com/css/css3_transitions.asp. If you what to create an animation using JS what you would do is set a CSS transition on the HTML element that you want to animate and then use JS to set CSS properties like background-color and transform. You can access the CSS of an element using element.style.property. replace property with the property you want to change or add.
The most intuitive answer I found was this:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
/*CSS entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Further explanation can be found here: https://davidwalsh.name/css-flip

Triggering an animation on a div by clicking a button using addClass/removeClass with Javascript

So I'm trying to trigger an animation by clicking on a button using addClass and removeClass with Javascript.
I'm not bad at HTML/CSS but I only strating to learn Javascript by editing snipets.
So here's mine can you tell me why my div won't rotate when I click the black button ?
Thanks in advance !
<button class="menu-circle"></button>
<img class='imgblock' src="http://lorempixel.com/400/200/" alt="" />
.menu-circle {
height: 100px;
width: 100px;
background-color: #000000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: .1s;
z-index: 100;
border: none;
}
.menu-circle:hover {
height: 115px;
width: 115px;
}
.menu-circle:active {
height: 100px;
width: 100px;
}
.imgblock {
display: block;
margin: 20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
.rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
$('.menu-circle').on('click', function(){
$('img .imgblock').addClass('rotate');
$('img .imgblock .rotate').removeClass('rotate');
});
WORKING FIDDLE :
http://jsfiddle.net/leokaj/rv5PR/366/
You have several problems with your fiddle:
Wrong class names: in js $('.menucircle') and in html - class="menu-circle"
You don't need space between img and class in jquery selector $('img .imgblock') - space means you're looking for .imgblock class inside the img tag (which is impossible).
.current class is not defined nor in html, nor in css, but appear in js
Here's fiddle where I fixed the problems and which works: DEMO
JS:
$('.menu-circle').on('click', function(){
var $img = $('.crossRotate');
if (!$img.hasClass('rotate')) {
$img.addClass('rotate');
} else {
$img.removeClass('rotate');
}
});
You ve to manage this with 2 different events to animate the image
$('.menu-circle').on('mousedown', function(){
$('.imgblock').addClass('rotate');
});
$('.menu-circle').on('mouseup', function(){
$('.imgblock').removeClass('rotate');
});
fiddle http://jsfiddle.net/3ehcuky5/
if you want to keep the image rotated or not the #alynioke solution is good
As you seem to be trying to make it jiggle a bit in animation and you're using jQuery already then I would say you need to look at the .animate() method of teh jQuery library
https://api.jquery.com/animate/

click on a div box with href

I have this code
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: url(games/racegame/foto/fotozonder.PNG) 0 0 no-repeat;">
</div>
<div class="back" style="background:#00B9FF;>
</div>
</div>
</div>
so when the mouse hoves above it it flips 180 so i see the back. But what i wanna do is
when the mouse hovers and you can see the back you can then click and in this case go to ispeedzone.com
someone know how to do that?
Try this:
.flip-container {
perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
background: orange;
}
.back {
transform: rotateY(180deg);
background: yellow;
}
.back a {
display: block;
width: 100%;
height: 100%;
}
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
hover to see back
</div>
<div class="back">
http://ispeedzone.com
</div>
</div>
</div>
JSFiddle demo: http://jsfiddle.net/67ad9e8h/
It's definately easier if you provide a jsfiddle or similar. But what you could do is simply make the anchor tag span the full width by using position:relative; on its parent div, then use position:absolute; and top/right/bottom/left:0.
Alternatively if the width/height is known, just use display block on the anchor tag and set its width height to match the parent div.
I think there might be some issues in IE if the tag is empty, however you can bypass that by adding some dummy text inside the anchor tag and set its text-indent property to something crazy like -100000px to make the text non visible.

Categories

Resources