Develop Reference

how do you rotate an image at a 40degree angle from left to right?

I am trying with jQuery or js to get an image rotate left to right constantly after upload (no button).

Try this hope it will be helpful.
const img = document.getElementsByTagName("img")[0]
img.addEventListener("load", function(){
img.classList.remove('rotateRight');
img.classList.add('rotateLeft');
});
img{
heigth :200px;
width : 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ;
}
.rotateRight{
transform: rotate(-40deg);
}
.rotateLeft{
transform: rotate(40deg);
}
<div>
<img class ="rotateRight" src='https://www.w3schools.com/w3css/img_fjords.jpg'/>
</div>

Javascript - changing background color opacity with time interval

I am trying to add the background color to a .top-barz element when I click on another element, but I would like to make that as an animation in duration of 1s. I am pretty new to javascript and not sure how to do that?
I would like to animate from change opacity of rgba(36,36,36, .1) to rgba(36,36,36, 1)
I have come up with this code and put it into my on click function, but this is obviously not working:
var topBar = setInterval(function(){ topBarBackground() }, 1000);
function topBarBackground() {
for (var i = 1; i <= 9; i++) {
$('.top-barz').css('background-color', 'rgba(36,36,36,.' + i + ')');
}
}
clearInterval(topBar);

You may consider the fadeIn function of jQuery.
$('.top-barz').fadeIn(10000);

Here is some sample code to get you started
JQuery
$('.button').on('click', function() {
$('.top-barz').addClass('new-color');
});
CSS
.top-barz {
background-color:#000;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.top-barz.new-color {
background-color:#eee;
}
Obviously you would change the colors to whatever color you want for your design.
EDIT
Here is the Fiddle
Seems to be working fine in chrome on my end

Michael McCoy is totally right in his comment. I would do the same as you will also benefit from GPU acceleration if you use CSS and it will make your code lighter.
This apart, your code has 2 errors:
missing i++
missing var i
_
function topBarBackground() {
for (var i = 1; i < 9; i++) {
$('.top-barz').css("background-color", "rgba(36,36,36,." + i + ")");
}
}
var myVar = setInterval(function(){topBarBackground()}, 1000);
Anyway, drop this idea.
So to add class just do $('.top-barz').addClass('changedColor');
and in css:
.top-barz {
background-color: rgba(36,36,36,.1);
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.top-barz.changedColor {
background-color: rgba(36,36,36,1);
}

Fade two images with different delay

I'm trying to fade 2 different images on the same page with a different delay. The first image appears and then the second one appears.
Here's my fiddle :http://jsfiddle.net/jarod51/4RvWY/3/
the css:
.panel img {
opacity:0;
-moz-transition: opacity 3000ms ease-in-out;
-webkit-transition: opacity 3000ms ease-in-out;
transition: opacity 3000ms ease-in-out;
}
.shown img{
opacity: 1;
}
.img2{
opacity:0;
-moz-transition: opacity 10000ms ease-in-out;
-webkit-transition: opacity 10000ms ease-in-out;
transition: opacity 10000ms ease-in-out;
}
.shown1 img2{
opacity: 1;
}
the html :
<div id="home" class="panel">
<h2>Home</h2>
<img src="http://lorempixum.com/200/200/people/3"/>
<img class="img2" src="http://lorempixum.com/200/200/people/1"/>
</div>
my jquery attempt:
$('#wrap').find('.shown').removeClass('shown');
$target.addClass('shown');
$('#wrap').find('.shown1').removeClass('shown1');
$target.addClass('shown1');

There's a couple of things you may fix to get it working:
1) You're missing a dot (.) before the img2 in the .shown1 img2 rule. You're referring to a class and not to an HTML tag. That must be like this:
.shown1 .img2{
opacity: 1;
}
2) If you want to apply a delay to the CSS transition, you can specify it after the duration in the shorthand transition property, or in the transition-delay property. For example, for a 2s delay you can use:
.panel .img2{
opacity:0;
-moz-transition: opacity 10000ms 2s ease-in-out;
-webkit-transition: opacity 10000ms 2s ease-in-out;
transition: opacity 10000ms 2s ease-in-out;
}
See it in action here: http://jsfiddle.net/FL3RK/2/
Anyway, IMHO it would be nicer if you use the same duration (3000ms or 3s) for both transitions.
EDIT: If you don't want to wait for the animation to be completed to start it over again, put the transition property in your .shown1 .img2 rule like this:
.shown1 .img2{
opacity: 1;
-moz-transition: opacity 3000ms 2s ease-in-out;
-webkit-transition: opacity 3000ms 2s ease-in-out;
transition: opacity 3000ms 2s ease-in-out;
}
Working fiddle: http://jsfiddle.net/FL3RK/3/

var finished = 0;
var callback = function (){
// Do whatever you want.
finished++;
}
$(".div"+finished).animate(params, duration, null, callback);

html
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/1"/>
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/4"/>
css
img {display:none;}
script
$("img").each(function(i) {
$(this).fadeIn(2000*(i+1));
});
see the fiddle http://jsfiddle.net/vishnurajv/px7U5/

How do I change the opacity of an image?

<script type="text/javascript">
$(document).ready(function(){
$('#logo').mouseenter(function() {
$('#logo').fadeTo("fast",0.3);
});
$('#logo').mouseleave(function() {
$('#logo').fadeTo("fast",1)
});
});
</script>
I made this to change the opacity of an image while hovering over it with the cursor, but this doesn't happen. :(

You don't need jQuery for that, you can use CSS:
Example HTML - you need it to have the ID logo.
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />
CSS
#logo {
opacity: 1;
filter:alpha(opacity=100);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
#logo:hover {
opacity: 0.3;
filter:alpha(opacity=30);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
http://jsfiddle.net/pFEdL/2/

What does you HTML look like for your image? Is it embedded in other divs?
SO: Jquery mouseenter() vs mouseover()
As gilly3 states in the question above, "Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter".

Taking advantage of hardware acceleration by using -webkit-transform instead of -webkit-transition?

I wish to create an animation where upon every click of a button, an object moves a certain amount to its right.
e.g If the initial position of the object was say "left:10px" and every 1 loop of animation moves it by say 10px, then after first click it should be at 20px, after second click it should be at 30px and so on.
Here's my code right now:
JavaScript
document.getElementById( 'move-me' ).addEventListener( 'click', function () {
var move = document.getElementById( 'move' );
move.style.left = ( move.offsetLeft + 10 ) + 'px';
}, false );
HTML
<button id="move-me">Move</button>
<div id="move"></div>
CSS
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
transition: left 250ms ease-in-out;
-moz-transition: left 250ms ease-in-out;
-ms-transition: left 250ms ease-in-out;
-o-transition: left 250ms ease-in-out;
-webkit-transition: left 250ms ease-in-out;
width: 50px;
}
This code uses CSS3 transitions but it doesn't make use of the -webkit-transform hardware acceleration on my android device. How do I fix that?

The choice is not between -webkit-transform and -webkit-transition, it's between left and -webkit-transform.
Here is how to make use of 3d acceleration:
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
-moz-transition: -moz-transform 250ms ease-in-out;
-ms-transition: -ms-transform 250ms ease-in-out;
-o-transition: -o-transform 250ms ease-in-out;
-webkit-transition: -webkit-transform 250ms ease-in-out;
transition: transform 250ms ease-in-out;
width: 50px;
}
Javascript:
document.getElementById( 'move' ).addEventListener( 'click', function() {
var move = document.getElementById( 'move' );
var transform = "translate3d("+ (move.offsetLeft+200) + "px, 0, 0)";
move.style.webkitTransform = transform;
move.style.mozTransform = transform;
move.style.msTransform = transform;
move.style.oTransform = transform;
move.style.transform = transform;
}, false );
http://jsfiddle.net/CjQ8H/

You can also use translateX. This defintely hardware accelerates.
targetDiv.style.webkitTransition = "0ms"
targetDiv.style.webkitTransform = "translateX(100%)
This would move a div to the right by 100% but nice and smooth only in hardware accelerated devices.