After the first mouse over this text, it should move by 200px to the right, after another mouse over the text returns to its starting position (200px to the left).
This is my code:
$(function() {
var small = true;
$('div').click(function() {
small = !small;
if (small) var properties = {
left: '0px'
},
"slow";
else properties = {
left: '100px'
}, "slow"
};
$('.box').stop().animate(properties, 250);
});
});
Use onmouseover and then toggle class to right and set margin-left in css
For animation use transition: all .5s ease;
function func(){
$('.left').toggleClass("right");
}
div{
background-color:blue;
width:150px;
transition: all .5s ease;
}
.right{
margin-left:200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="func()" class="left">try me</div>
You have a type erro in your if else block , just remove the "slow" , and
annimation work :
See snippet :
$(function() {
val = 0;
var properties;
$('div').mouseover(function() {
if(val<200) val+=100;
else val =0;
properties = {
left: val+'px'
}
$('.box').stop().animate(properties, 250);
});
});
.box {
background-color: red;
display: block;
width: 50px;
height: 50px;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border:1px solid black">hover here</div>
<span class="box">Box</span>
You can also achive this using css transition (by removeing addin class)
See below snippet :
$(function() {
$('div').mouseover(function() {
if($('.box').hasClass("left100px"))
$('.box').toggleClass("left100px").addClass("left200px");
else if ($('.box').hasClass("left200px"))
$('.box').toggleClass("left200px");
else $('.box').toggleClass("left100px");
});
});
.box {
background-color: red;
display: block;
width: 50px;
height: 50px;
position:absolute;
transition: all .25s ease;
left:0;
}
.left100px{
left:100px;
}
.left200px{
left:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border:1px solid black">hover here</div>
<span class="box">Box</span>
maybe below program will help you
$(function() {
var i = 0;
var value;
$('div').mouseover(function() {
if(i<200){
i+=200;
}
else {i =0;}
value = {
left: i+'px'
}
$('div').stop().animate(value, 1000);
});
});
div {
background-color: green;
display: block;
width: 100px;
height: 100px;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div >hover mouse corsor here</div>
Related
I have these 2 divs and when I click on div 1 I want it to go over the second div, and if I click on Div 1 again I want it to go back to its original position (I want Div 1 to increase its width so it goes over the second Div). Here is my code where I have my 2 divs next to each other. Can anyone point me in the right direction on how to accomplish this? Thanks a lot in advance!
NOTE:
- No jQuery please. I'm trying to accomplish this with javascript and css.
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
}
#wide {
flex: 1;
background: lightgreen;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>
If you're willing to ditch flex, you can use a combination of float , postion:absolute and transition so that the main div "slides over" the other div
document.querySelector("#wide").onclick = toggleWidth;
function toggleWidth() {
this.classList.toggle("active");
}
#parent {
position: relative;
}
#narrow {
width: 200px;
background: lightblue;
float: right;
}
#wide {
position: absolute;
background: lightgreen;
width: calc(100% - 200px);
transition: width 2s;
}
#wide.active {
width: 100%;
opacity: 0.9;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>
Note: Changing the opacity is purely optional, I've only done it to further illustrate the "slide over" effect.
Try this
#parent {
display: flex;
}
#narrow {
width: 20vw;
position: absolute;
left: calc(80vw - 10px);
background: lightblue;
z-index: 1;
margin: 0;
}
#wide {
width: calc(80vw - 10px);
background: lightgreen;
transition: all 0.3s ease-out;
}
.wider {
width: 100vw!important;
z-index: 2;
}
<div id="parent">
<div id="wide" onclick="myFunction()">Div 1</div>
<div id="narrow">Div 2</div>
</div>
<script>
function myFunction() {
var element = document.getElementById("wide");
element.classList.toggle("wider");
}
</script>
You can try it using JavaScript.
First, you prepare your CSS:
#narrow {
width: 200px;
transition: 0.32s;
overflow: hidden;
}
#wide.fullwidth ~ #narrow {
width: 0;
opacity: 0;
}
Then, the JavaScript, like this:
document.querySelector("#wide").onclick = changeDivWidth;
var wideFull = false;
function changeDivWidth () {
if (!wideFull) {
this.classList.add("fullwidth");
wideFull = true;
return; // if variable wideFull is false, function stops here
}
wideFull = false;
this.classList.remove("fullwidth");
}
Shorter approach using toggle();
document.querySelector("#wide").onclick = changeDivWidth;
function changeDivWidth () {
this.classList.toggle("fullwidth");
}
Are you looking for something like this : JSFiddle ?
JavaScript (Pure) :
function HideDivOne(){
var wide = document.getElementById("wide");
var narrow = document.getElementById("narrow");
if (wide.style.width == "70%"){
wide.style.width = "100%";
narrow.style.width = "0%";
narrow.style.opacity = "0";
}
else{
wide.style.width = "70%";
narrow.style.width = "30%";
narrow.style.opacity = "1";
}
}
CSS
#parent {
display: flex;
}
#narrow {
width: 30%;
background: lightblue;
height: 20px;
transition: 0.2s;
}
#wide {
width: 70%;
flex: 1;
background: lightgreen;
height: 20px;
transition: 0.2s;
}
HTML
<div id="parent">
<div id="wide" onclick="HideDivOne()">Div1</div>
<div id="narrow" onclick="HideDivTwo()">Div2</div>
</div>
You can change the z-index of the divs based on your desired effect. My suggestion is using jQuery. On click on div 1 add a class to the div that modify the zindex, that is, if the class is not already added, if so, remove it.
I want to check when a transition ends, but it fires twice / multiple times, I want to check only one time when I click the element and call the function, and not again when remove the class, I tried with one(), stopPropagation() or even return false at the end of the function but it didn´t work, how achieve that?
Here is a example:
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition()
})
function checkEndTransition() {
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
$.when($(this)).done(function() {
console.log("Finished")
var val = $(this)
setTimeout(function () {
val.removeClass("example")
}, 1500)
})
})
}
})
.main{
width: 170px;
height: 170px;
background-color: lightgrey;
transition: 1.5s;
}
.example{
width: 250px;
height: 250px;
background-color: #7fff7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
</div>
<div>
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition();
})
function checkEndTransition() {
var flag = true;
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
if(flag){
$.when($(this)).done(function() {
console.log("Finished");
var val = $(this);
setTimeout(function () {
val.removeClass("example");
}, 1500)
})
}
flag = false;
})
}
})
.main{
width: 170px;
height: 170px;
background-color: lightgrey;
transition: 1.5s;
}
.example{
width: 250px;
height: 250px;
background-color: #7fff7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
</div>
<div>
Your problem is $(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() runs multiple time. You can use a flag to make it run only one time. Use above script and it will work.
It calls it three times because you are animating 3 elements - width, height, and background color. It calls "transitionend, webkitTransitionEnd ect." for each one when they finish.
To avoid this, instead of using transitions, use a keyframe object instead.
I also change the checkEndTransition() function to listen for animation end now instead of transition end...
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition()
})
function checkEndTransition() {
$(document).on("animationEnd webkitAnimationEnd", ".main", function() {
$.when($(this)).done(function() {
console.log("Finished")
var val = $(this)
setTimeout(function() {
val.removeClass("example")
}, 1500)
})
})
}
})
.main {
width: 170px;
height: 170px;
background-color: lightgrey;
}
.example {
animation: change 1 3s ease;
-webkit-animation: change 1 3s ease;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes change {
0% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
50% {
width: 250px;
height: 250px;
background-color: #7fff7f;
}
100% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
}
#keyframes change {
0% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
50% {
width: 250px;
height: 250px;
background-color: #7fff7f;
}
100% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
I want to add a fade in / fade out effect to a hidden block (id = "help"). How can I animate a block using pure css? Also, I want to animate the link (id = "show) after clicking. Please help and give me some examples.
See my code:
var showElem = document.getElementById("show");
var hideElem = document.getElementById("hide");
var helpDiv = document.getElementById("help");
helpDiv.style.display = 'none';
hideElem.style.visibility = 'hidden';
showElem.onclick = function() {
showElem.style.visibility = 'hidden';
hideElem.style.visibility = 'visible';
helpDiv.style.display = 'block';
};
hideElem .onclick = function() {
hideElem.style.visibility = 'hidden';
showElem.style.visibility = 'visible';
helpDiv.style.display = 'none';
};
div#help {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
margin-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
SHOW
HIDE
<div id="help"></div>
</body>
</html>
Try This:
$(document).ready(function(){
$("#show").click(function(){
$('.help').addClass('sh');
$(this).css('opacity',0)
$("#hide").css('opacity',1)
})
$("#hide").click(function(){
$('.help').removeClass('sh');
$(this).css('opacity',0)
$("#show").css('opacity',1)
})
})
#hide, #show, .help {
transition: all 1s;
}
.help {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
margin-top: 10px;
opacity: 0;
}
#hide {
opacity: 0;
}
.sh {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
SHOW
HIDE
<div class="help" class="sh"></div>
In case you're using jQuery:
jsfiddle: https://jsfiddle.net/0j9qbj7p/4/
HTML
SHOW
HIDE
<div id="help">Text here</div>
CSS
#hide, #help{
display: none;
}
#help{
background-color: blue;
height: 400px;
}
jQuery
$showElem = $('#show');
$hideElem = $('#hide');
$helpElem = $('#help');
$showElem.click(function(){
$helpElem.slideDown();
$hideElem.show();
});
$hideElem.click(function(){
$helpElem.slideUp();
$hideElem.hide();
});
In order to use animations with pure CSS, you have to use '#keyframes' to control the opacity ( in order to simulate fade in / fade out effect) of the box.
Just add this to the top of the CSS file:
#keyframes FadeAnimation {
from{
opacity:0;
}
to {
opacity:1;
}
}
But afterwards, you also have to show what item you want to animate by adding this line to your code:
div#help {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
margin-top: 10px;
background:grey /* it is important to give a background color*/
animation-name: FadeAnimation; /* the name of the keyframes */
animation-duration:0.5s /* the duration time */
animation-iteration-count:1; /* how many time to repeat */
}
You can do the same with the words in the box.
I have 2 DIVs in a flexbox container, where they both start of side by side. By removing one of the divs, the other one becomes centered within the container.
I cant seem to find a way of making an animated transition from centered/uncentered. Is there any way of doing this?
HTML:
<div id='wrap'>
<div id='a'></div>
<div id='b'></div>
</div>
<button id='btna' onclick="toggle('a')">Toggle Red</button>
<br>
<button id='btnb' onclick="toggle('b')">Toggle Green</button>
CSS:
#wrap{
width: 400px;
height: 200px;
border: 1px dashed grey;
display: flex;
justify-content: center;
}
#a{
width: 200px;
height: 200px;
background-color: red;
}
#b{
width: 200px;
height: 200px;
background-color: green;
}
JS:
var displayed = [ true, true ];
function toggle( div )
{
if( div == 'a' )
{
if( displayed[0] )
{
$('#a').fadeOut(500);
}
else
{
$('#a').fadeIn(500);
}
displayed[0] = !displayed[0];
}
else
{
if( displayed[1] )
{
$('#b').fadeOut(500);
}
else
{
$('#b').fadeIn(500);
}
displayed[1] = !displayed[1];
}
}
Here is a jsfiddle for what I have so far:
https://jsfiddle.net/uvyLh8m9/6/
The reason for this is that your function fadeIn first make decrease opacity without letting disappear the block, and only then, lets it disappear.
I would do it this way : which means, letting fade out manually and during the same time decreasing the width. Optionally you could call Element.style.display = 'none'; after 500ms using setTimeout(function(){/*code here*/}, 500);
var displayed = [ true, true ];
function toggle( div )
{
if( div == 'a' )
{
if( displayed[0] )
{
//$('#a').fadeOut(500);
document.getElementById('a').style.opacity = 0;
document.getElementById('a').style.width = '0px';
}
else
{
//$('#a').fadeIn(500);
document.getElementById('a').style.opacity = 1;
document.getElementById('a').style.width = '200px';
}
displayed[0] = !displayed[0];
}
else
{
if( displayed[1] )
{
//$('#b').fadeOut(500);
document.getElementById('b').style.opacity = 0;
document.getElementById('b').style.width = '0px';
}
else
{
//$('#b').fadeIn(500);
document.getElementById('b').style.opacity = 1;
document.getElementById('b').style.width = '200px';
}
displayed[1] = !displayed[1];
}
}
#wrap{
width: 400px;
height: 200px;
border: 1px dashed grey;
display: flex;
justify-content: center;
}
#a, #b {
-webkit-transition:opacity 500ms, width 500ms;
-moz-transition:opacity 500ms, width 500ms;
transition:opacity 500ms, width 500ms;
}
#a{
width: 200px;
height: 200px;
background-color: red;
}
#b{
width: 200px;
height: 200px;
background-color: green;
}
<div id='wrap'>
<div id='a'></div>
<div id='b'></div>
</div>
<button id='btna' onclick="toggle('a')">Toggle Red</button>
<br>
<button id='btnb' onclick="toggle('b')">Toggle Green</button>
I'm trying to animate an element to move: left:0px but It doesn't seem to work. I surmise the issue is that the element isn't absolute positioned but how would I do that with animate?
fid: https://jsfiddle.net/jzhang172/j2yrumyg/8/
$(function(){
var cheese= $('.ok').offset().top; //Define top of 'hey'
//
//Animates when it reaches red part of page
//
$(window).scroll(function() {
if ( $(window).scrollTop() >= cheese ) {
$('.ok').addClass('top');
$('.nice').hide().fadeIn().html('ok');
$(".nice").animate({
left:"0"
}, 600);
$('.nice').addClass('maybe');
}
else{
$('.ok').removeClass('top');
$('.nice').removeClass('maybe');
$('.nice').html('Hey');
}
});
//
//This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
//
$('.ok').hover(function(){
if(!$(this).hasClass("top"))
$(this).addClass('proj-hover');
},function(){
$(this).removeClass('proj-hover');
});
//
//Animate on click
//
$('.ok').click(function(){
if ( $(window).scrollTop() >= cheese ) {
}
else{
$("body, html").animate({
scrollTop: $('.other').offset().top
}, 600);
}
});
});
*{
box-sizing:border-box;
}
body,html{
padding:0;
margin:0;
}
.div{
height:100vh;
width:100%;
background:#6464FF;
}
.other{
height:1000px;
width:100%;
background:#FF6161;
}
.ok{
position:absolute;
bottom:0;
left:50%;
margin-left:-100px;
width:200px;
height:50px;
line-height:50px;
background:black;
color:white;
text-align:center;
transition:1s;
}
.top{
position:fixed;
top:0;
left:0;
transition:.7s;
margin-left: 0px;
width:100%;
}
.proj-hover{
background:white;
color:black;
}
.blue{
background:blue;
}
.nice{
transition:0s;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="ok">
<p class="nice">Hey</p>
</div>
</div>
<div class="other">
</div>
To move the text to the left, which is centered by a text-alignment property, you have to change the width of the container. I did the animation with CSS3 by adding some css and removing the jquery animation of the element nice :
.nice {
margin: 0px;
width: 100%;
transition: width .6s;
}
.maybe {
width: 0;
}
Here the complete code:
$(function() {
var cheese = $('.ok').offset().top; //Define top of 'hey'
//
//Animates when it reaches red part of page
//
$(window).scroll(function() {
if ($(window).scrollTop() >= cheese) {
$('.ok').addClass('top');
//$(".nice").animate({
// width: '0%'
//}, 600).css('overflow', '');
$('.nice').addClass('maybe');
} else {
$('.ok').removeClass('top');
$('.nice').removeClass('maybe');
$('.nice').html('Hey');
}
});
//
//This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
//
$('.ok').hover(function() {
if (!$(this).hasClass("top"))
$(this).addClass('proj-hover');
}, function() {
$(this).removeClass('proj-hover');
});
//
//Animate on click
//
$('.ok').click(function() {
if ($(window).scrollTop() >= cheese) {
} else {
$("body, html").animate({
scrollTop: $('.other').offset().top
}, 600);
}
});
});
* {
box-sizing: border-box;
}
body,
html {
padding: 0;
margin: 0;
}
.div {
height: 100vh;
width: 100%;
background: #6464FF;
}
.other {
height: 1000px;
width: 100%;
background: #FF6161;
}
.ok {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -100px;
width: 200px;
height: 50px;
line-height: 50px;
background: black;
color: white;
text-align: center;
transition: 1s;
}
.top {
position: fixed;
top: 0;
left: 0;
transition: .7s;
margin-left: 0px;
width: 100%;
}
.proj-hover {
background: white;
color: black;
}
.blue {
background: blue;
}
.nice {
transition: 0s;
margin: 0px;
width: 100%;
transition: width .6s;
}
.maybe {
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="ok">
<p class="nice">Hey</p>
</div>
</div>
<div class="other">
</div>
Not sure if I understand your question. The "ok" should move to the left?
You have declared width:100%; in your CSS class top. So it is already left. Remove it and it will work.
Or you might want within the .nice class:
position:absolute;
left:0; right:0;
margin: auto;
and do a
$(".nice").animate({
right:"100%"
}, 600);