'toggel' rotation of element back and forth using css3/jquery - javascript

i've got an image that i want to onclick animate the rotation 90degress, when its clicked again i want it to animate the rotation -90degrees.
For the rotation im using the css3 transform:
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
For the jquery I want to set a varable to check if the object has been rotated, then act accordingly.
I have been having a real difficult time trying to get it to work. I've put together a JsFiddle.
This is the code I am using:
var turn = true;
$("#button").click(function () {
$("#shape").css('transform', function(index) {
return index * 90;
});
});

Add some transitions and a rotate class, and just toggle that class:
css:
#shape { width: 100px;
height: 200px;
background:#000;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate {-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
js:
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});​
FIDDLE

If I understood correct, THIS should do it.

I think in general, if you're going to use transition's you should target the specific properties you want to affect. I would consider the use of "all" to be poor practice.
Target alternative:
css:
#shape {
width: 100px;
height: 200px;
background:#000;
-moz-transition: transform 1s ease;
-webkit-transition: transform 1s ease;
-o-transition: transform 1s ease;
transition: transform 1s ease;
}
.rotate {
-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
///jquery
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});​

Related

Highlight area with backgroundcolor fadein/fadeout

Hi I'd like to highlight .small. Do not have access to add jQuery UI e.g. can't use .animate.
HTML
<span class="small">10 left</span>
jQuery
$(".small").css("background-color","orange");
Question: How do I add background-color orange and make it .fadeOut() here? This below doesn't work? Only want to fadeout the background color, nothing else.
$(".small").css("background-color","orange").fadeOut();
you can use CSS animations to do that
see snippet below
span {
background-color:orange;
animation-name:bckanim;
animation-fill-mode:forwards;
animation-duration:3s;
animation-delay:0s;
}
#keyframes bckanim {
0% {background-color:orange;}
100% { background-color:transparent;}
}
<span class="small">10 left</span>
You can use timeouts and css transitions nicely for this.
For more information about transitions:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
$(document).ready(function(){
var $block = $('.block');
/** first timeout to make the document do its stuff before this thing runs **/
window.setTimeout(function() {
$block.addClass('orange-fade');
/** second timeout to turn it back to normal **/
window.setTimeout(function() {
$block.removeClass('orange-fade');
},2000);
},1000);
});
.block {
display:block;
width:200px;
height:200px;
background-color:green;
/** Transitions to give a nice effect **/
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
.orange-fade {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" block transition">
Look at me! Look at you! now look back to me! i'm on a horse!
</div>
You can do something like this with css transitions on a class and then add or remove the class with JS.
HTML:
<span class="small">10 left</span>
CSS:
.small {
background-color: #fff;
transition-property: background-color;
transition-duration: 1s;
transition-delay: 1s;
}
.orange {
background-color: orange;
}
JS:
$(".small").addClass("orange");
DEMO https://jsfiddle.net/ry5qxvos/
try this http://jsfiddle.net/x2jrU/92/ use this jquery to make background color of ur wish with fadein/fadeout option.
jQuery.fn.highlight = function() {
$(this).each(function() {
var el = $(this);
el.before("<div/>")
el.prev()
.width(el.width())
.height(el.height())
.css({
"position": "absolute",
"background-color": "#ffff99",
"opacity": ".9"
})
.fadeOut(500);
});
}
$("#target").highlight();
#target { width: 300px; height: 100px; border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">Highlight Me</div>

Add transition while changing img src with javascript

I have an img tag that I want to change the src when hover and it all works but i would like to add some transition so it doesn't look so rough but since it's an img src i cant target it with css.
http://jsfiddle.net/Ne5zw/1/
html
<img id="bg" src="img/img1.jpg">
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">
js
function imgChange(im){
document.getElementById('bg').src=(im);
}
You want a crossfade. Basically you need to position both images on top of each other, and set one's opacity to 0 so that it will be hidden:
<div id="container">
<img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">
<img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
</div>
CSS:
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
With a transition set for opacity on the images, all we need to do is trigger it with this script:
$(function(){
debugger;
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});
http://jsfiddle.net/Ne5zw/12/
Here is a pure css solution using css transition. You can use a div as the container and set the background-image on hover.
.image-container {
background: url(http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image) center center no-repeat;
background-size: contain;
width: 150px;
height: 150px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-container:hover {
background-image: url("http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image");
}
<div class="image-container"></div>
Just in case someone is curious how to actually create a transition-like effect when you are actually changing the source attribute of an image, this was the solution I came up with.
Javascript:
var bool = false;
setInterval(() => {
bool = !bool;
let imgSrc = bool ? 'hero-bg2.jpg' : 'hero-bg.jpg'; // Toggle image
$('.parallax-slider').addClass('transitioning-src'); // Add class to begin transition
setTimeout(() => {
$('.parallax-slider').attr('src', `https://website.com/images/${imgSrc}`).removeClass('transitioning-src');
}, 400); // Ensure timeout matches transition time, remove transition class
}, 6000);
CSS:
.parallax-slider {
transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
opacity: 1;
}
.transitioning-src {
transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
opacity: 0;
}
This will give the illusion of 'fading to black and back' between images - even if you're using something like parallax.js where you have a data-attribute driven component that renders out into a dynamic image. Hope it helps someone.
Fixed Mister Epic solution's images in this jsfiddle.
HTML
<div id="container">
<img class="hidden image1" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image">
<img class="image2" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image" />
</div>
<div id="hoverMe">hover me</div>
CSS
div#hoverMe {
background-color:yellow;
width:50px;
height:50px;
position:fixed;
top:300px;
}
div#container{
position:relative;
height:200px;
}
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
JS
$(function(){
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});

Opacity on a div hover

So far I've got this code
http://jsfiddle.net/Nq79H/1/
but I want to fadeout the image in order to leave only the text visible.
Do I need to change the javascript or write a new css div?
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
...but I want to fadeout the image in order to leave only the text visible.
Simply add .fadeToggle() to the img element as well:
$('img', this).fadeToggle();
JSFiddle example.
Here is the CSS3 transition solution:
jsFiddle
CSS
.thumb .text {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #999;
background: rgba(0, 0, 0, 0.3);
text-align: center;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
opacity:0;
}
.thumb:hover .text {
opacity:1;
}
.thumb img {
opacity:1;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
}
.thumb:hover img {
opacity:0;
}
Support
The support for CSS3 transitions is pretty decent now, the latest versions of all the major browsers (Safari, Chrome, Opera, Firefox) all support transitions. IE on the other hand only supports it from version 10. Transitions are nice though in that they don't crash and burn when something doesn't support it. The opacity of the element will still change, there will just be no transition.
References
Caniuse.com transitions
If you want to fadeIn text and fadeOut image, just add one more line:
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
$(this).children("img").fadeToggle();
});
$(this).find('img').fadeToggle();
Is this what you're looking for?
$('.thumb').hover(function(){
$(this)
.find('.text-js')
.fadeToggle()
.end()
.find('img')
.fadeToggle();
});
http://jsfiddle.net/Nq79H/4/
No JS or additional HTML needed.
http://jsfiddle.net/Nq79H/11
.thumb img {
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
.thumb:hover img {
opacity: 0;
}

javascript-triggered transitions with opacity and visibility in Safari

I'm using the following code.
By clicking on div id="popUpPane", the div and it's childs should appear and slowly fade in.
By clicking on the div again, it should slowly fade out and then disappear.
Firefox and Chrome (which is webkit too) behave that way and I know Safari did in an earlier version, too. But right know on Safari and on Safari Mobile nothing happens at all when I click on "popUpPane".
Is this a bug in Safari or is there something I could change to come back to the intended behaviour?
One addition: If I set -webkit-transition to -webkit-transition: opacity .5s ease-in-out; it works fine but the transition only appears on the first click. There's no transitions after that first one... If I delete the opacity-part in the java-script the opo-up works but there's no transition.
All other transitions on my site are working. But they all use only opacity and no visibility.
Here's my code:
CSS:
#popUpPane {
white-space:normal;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
vertical-align:middle;
visibility:hidden;
z-index:90;
}
#greyOut {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:0;
}
#popUpPicCanvas {
position:relative;
top:50%;
margin-top:-325px;
display:inline;
opacity:0;
z-index:100;
}
.fade {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
HTML:
<div id="popUpPane" onClick="noPopUp()">
<div id="greyOut" class="fade"> </div>
<canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel" class="fade"></canvas>
</div>
Javascript:
var popUpPane = document.getElementById("popUpPane"),
greyOut = document.getElementById("greyOut"),
popUpPicCanvas = document.getElementById("popUpPicCanvas"),
popCanvasContext = popUpPicCanvas.getContext("2d");
var doPopUp = function(source,x,y){
var popUpPic = document.getElementById("pic"+source);
popCanvasContext.canvas.width = x;
popCanvasContext.canvas.height = y;
popCanvasContext.drawImage(popUpPic, 0, 0,x,y);
popUpPane.style.visibility = "visible";
greyOut.style.opacity = "0.7";
popUpPicCanvas.style.opacity = "1";
};
var noPopUp = function(){
greyOut.style.opacity = "0";
popUpPicCanvas.style.opacity = "0";
popUpPane.style.visibility = "hidden";
};
I hope someone can help me.
Thanks for your responds!
Yep, there is a bug in mobile Safari with simultaneous transition for opacity+visibility.
You can fix it using something except for visibility: in your case setting the width and height to 0 would help. However you must add the delay, so they would change not instantly.
Here is a dabblet with the working example: http://dabblet.com/gist/1642110
/**
* Delayed alternative for visibility
*/
a {
display: inline-block;
background: #888;
color:#FFF;
padding: 1em;
}
div {
width: 100px;
height: 100px;
background: lime;
transition: opacity 1s;
}
a:hover+div {
width: 0;
height: 0;
opacity: 0;
transition: width 0s 1s, height 0s 1s, opacity 1s;
}
Thank you!
Since this bug is now removed from the latest releases of webkit the problem is gone for safari and chrome.
i started to have problems since the position of my div also was transitioned so I wrote it like this:
.dofade {
-webkit-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-moz-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-o-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
}

Transitioning multiple objects across a div using css3/javascript

I have 3 objects (divs) that I want to transition simultaneously as soon as the page loads. To help animate this I am using a little bit of javascript which works perfectly with just the one object but I'm not sure how to rewrite the javascript to activate all 3 objects obey each objects individual styling.
I found an example of "Using transition events to animate an object" on the Mozilla Developer Network site ( https://developer.mozilla.org/en/CSS/CSS_transitions/ ), but unfortunately they disabled their forums so I couldn't find a solution.
Here is the basic HTML:
<body onload="runDemo()">
<div id="cloud-comtainter">
<div class="cloud1Right"></div>
<div class="cloud2Right"></div>
<div class="cloud3Right"></div>
</div>
</body>
I have 2 divs with an background-image, one to represent the object's styling while on the left and it's styling on the right positions.
Here is the CSS for the one object:
.cloud1Right {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:2%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
.cloud1Left {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:90%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
And here is the Javascript that calls up this object and animates it to move right across the screen and then back again:
function runDemo() {
var el = updateTransition();
// Set up an event handler to reverse the direction
// when the transition finishes.
el.addEventListener("transitionend", updateTransition, true);
}
function updateTransition() {
var el = document.querySelector("div.cloud1Left");
if (el) {
el.className = "cloud1Right";
} else {
el = document.querySelector("div.cloud1Right");
el.className = "cloud1Left";
}
return el;
}
Now, my other 2 elements I want to transition at the same time are named .cloud2Left (and .cloud2Right) and .cloud3Left (and .cloud3Right) each with it's own specific styling (position, left %, transition rate, etc).
I've scoured the web for a solution and have messed around with the js. I looked here and around the Web and found information about selectors and how to use multiple selectors with no luck. I've tried using the multiple selectors like such:
var el=document.querySelector("div.cloud1Left, div.cloud2Left, div.cloud3Left");
and
var el=document.querySelector("div.cloud1Left");
var el=document.querySelector("div.cloud2Left");
var el=document.querySelector("div.cloud3Left");
and the same for the el.className
If anyone has any ideas or knows how to rewrite the javascript function to include all 3 objects (divs) and have them work simultaneously as soon as the page loads I would be greatly appreciative. Thank you in advance.
I think I have solution for you. I was doing a small thing today, based on the same example and this worked for me.
Basically I have one 'opener' which clicked turns and lets 3 other divs transition when turn is finished. Each one with its own speed. And back - when clicked to close - first 3 divs are closing and when this is finished - 'opener' turns finishing animation.
HTML:
<div id="opener" onclick="switch_toolbox('open')" class="vertical">Food Toolbox</div>
<div id="tools">
<h2 id="toolbox_title" class="title">Appliances</h2>
</div>
<div id="freezer">
<h2 id="food_title" class="title">Food store</h2>
</div>
<div id="spicebox">
<h2 id="spices_title" class="title">Spices</h2>
</div>
CSS:
#opener{
display:block;
overflow:hidden;
width:8.8em;
background-color:#F00;
font-weight:600;
font-size:1.5;
padding:0 0.5em;
cursor:pointer;
transition:all 0.5s ease 0s;
-moz-transition:all 0.5s ease 0s; /* Firefox 4 */
-webkit-transition:all 0.5s ease 0s; /* Safari and Chrome */
-o-transition:all 0.5s ease 0s; /* Opera */
-ms-transition:all 0.5s ease 0s; /* IE */
}
.vertical{
-webkit-transform: rotate(90deg), translate(3em,3em);
-moz-transform: rotate(90deg) translate(3em,3em);
-o-transform: rotate(90deg) translate(3em,3em);
-ms-transform: rotate(90deg) translate(3em,3em);
transform: rotate(90deg) translate(3em,3em);
}
.horizontal{
-webkit-transform: rotate(0), translate(0,0);
-moz-transform: rotate(0) translate(0,0);
-o-transform: rotate(0) translate(0,0);
-ms-transform: rotate(0) translate(0,0);
transform: rotate(0) translate(0,0);
}
#tools{
display:block;
overflow:hidden;
height:1.2em;
width:0;
transition:width 1.5s ease 0s, height 1s ease 0s;
-moz-transition:width 1.5s ease 0s, height 1s ease 0s; /* Firefox 4 */
-webkit-transition:width 1.5s ease 0s, height 1s ease 0s; /* Safari and Chrome */
-o-transition:width 1.5s ease 0s, height 1s ease 0s; /* Opera */
-ms-transition:width 1.5s ease 0s, height 1s ease 0s; /* IE */
}
#freezer{
display:block;
overflow:hidden;
height:1.2em;
width:0;
transition:width 1s ease 0.5s, height 1s ease 0s;
-moz-transition:width 1s ease 0.5s, height 1s ease 0s; /* Firefox 4 */
-webkit-transition:width 1s ease 0.5s, height 1s ease 0s; /* Safari and Chrome */
-o-transition:width 1s ease 0.5s, height 1s ease 0s; /* Opera */
-ms-transition:width 1s ease 0.5s, height 1s ease 0s; /* IE */
}
#spicebox{
display:block;
overflow:hidden;
height:1.2em;
width:0;
transition:width 0.5s ease 1s, height 1s ease 0s;
-moz-transition:width 0.5s ease 1s, height 1s ease 0s; /* Firefox 4 */
-webkit-transition:width 1.5s ease 1s, height 1s ease 0s; /* Safari and Chrome */
-o-transition:width 0.5s ease 1s, height 1s ease 0s; /* Opera */
-ms-transition:width 0.5s ease 1s, height 1s ease 0s; /* IE */
}
And finally JS:
function switch_toolbox(direction){
var spicebox = document.getElementById('spicebox');
var opener = document.getElementById('opener');
if(direction=='close'){
closeem();
spicebox.addEventListener("transitionend", closeme, false);
}else{
openme();
opener.setAttribute('onclick','switch_toolbox("close")');
opener.addEventListener("transitionend", openem, false);
}
return false;
}
function openme(){
var opener = document.getElementById('opener');
opener.setAttribute('class','horizontal');
}
function closeme(){
var spicebox = document.getElementById('spicebox');
spicebox.removeEventListener("transitionend", closeme, false);
var opener = document.getElementById('opener');
opener.removeEventListener("transitionend", openem, false);
opener.setAttribute('class','vertical');
opener.setAttribute('onclick','switch_toolbox("open")');
var tools = document.getElementById('tools');
}
function openem(){
var opener = document.getElementById('opener');
opener.removeEventListener("transitionend", openem, false);
var spicebox = document.getElementById('spicebox');
spicebox.removeEventListener("transitionend", closeme, false);
var tools = document.getElementById('tools');
var freezer = document.getElementById('freezer');
tools.style.backgroundColor='#EBD3A3';
tools.style.width='20em';
freezer.style.width='20em';
freezer.style.backgroundColor='#B7CEEC';
spicebox.style.width='20em';
spicebox.style.backgroundColor='#FFA500';
}
function closeem(){
var tools = document.getElementById('tools');
var freezer = document.getElementById('freezer');
var spicebox = document.getElementById('spicebox');
freezer.style.height='1.2em';
spicebox.style.height='1.2em';
tools.style.height='1.2em';
tools.style.width='0';
freezer.style.width='0';
spicebox.style.width='0';
}
Hope this help, and this is what you were looking for
Best
Pifon

Categories