Develop Reference

How to rotate elements either forward or back from current state

Say I have three elements. When user clicks on any of the elements, that element needs to rotate either +120 degrees or -120 degrees every time it's clicked (direction selected randomly with no particular order). So if it's current rotation is at 120, when it's click again, it rotates another 120 degrees. I need it to alternate between plus or minus rotation at random. So it can either rotate forward or back...
Here is the code I currently have:
var aElement = $(".element").each(function(){});
aElement.on('click', function() {
$(this).css("transform", "rotate(120deg");
})
Any help is greatly appreciated.

I suggest to use data-* attributes to check if the clicked element is rotated of not using (1 and 0) then do the inversion, check the example below.
Hope this helps.
$('body').on('click', '.element', function() {
if ( $(this).data("rotated")==='1' ) {
$(this).css("transform", "rotate(0deg").data("rotated","0");
} else {
$(this).css("transform", "rotate(120deg").data("rotated","1");
}
})
.element{
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-rotated='0' class="element" src='http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png' />
<img data-rotated='0' class="element" src='http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png' />
<img data-rotated='0' class="element" src='http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png' />
Update
For random rotation you could generate a random boolean and make a condition on it, check the example below.
$('body').on('click', '.element', function() {
var random_rotation_state = Math.random() >= 0.5;
var rotation = parseInt($(this).data('rotation'));
if ( random_rotation_state )
rotation+= 120;
else
rotation-= 120;
$(this).css("transform", "rotate("+rotation+"deg").data("rotation", rotation);
console.log(rotation);
})
.element{
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-rotation='0' class="element" src='http://haizdesign.com/wp-content/uploads/2012/05/css3-featured.png' />
<img data-rotation='0' class="element" src='http://az676930.vo.msecnd.net/media/1328/3_html5___css3_integration.png' />

I stand corrected. $(this).css('transform') doesn't give us the numeric angle. Instead it gives us something like this matrix(-0.5, 0.866025, -0.866025, -0.5, 0, 0). Remember you need to do this for the rest of the browser prefixes.
Original Source: https://css-tricks.com/get-value-of-css-rotation-through-javascript/
$('.element').click(function(elm){
var tr = $(this).css("transform");
var values = tr.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
angle = angle * - 1;
console.log(angle);
$(this).css({ transform: 'rotate(' + angle + 'deg)'});
});
li{
width: 50px;
height: 50px;
background: tomato;
margin-bottom: 10px;
transform: rotate(120deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
</ul>

var aElement = $(".element").each(function(){});
aElement.on('click', function() {
if ($(this).css("transform") == "rotate(120deg)") {
$(this).css("transform", "rotate(-120deg");
} else {
$(this).css("transform", "rotate(120deg");
}
})

jquery slider with controls and automatic scrolling

Basically I am just trying to do random jQuery stuff for educational purpose, and here is my very simple slider. I want it to work automatically and also with controls (little arrows to scroll to next/previous slider). The only problem that I have right now is that when you press the arrow, the function that automatically switches slides every 5 seconds is still counting these 5000 ms, so the next slide appears faster then desired. What I want is to make those arrows reset the timer, so you press the arrow -> next slide appears -> only after 5 seconds later the slide switches again.
Sorry for sloppy explanation, hope I made it clear enough.
Here's the jsfiddle: http://jsfiddle.net/cA9aW/
and here is the code
HTML
<body>
<div id="wrapper">
<header>
<h1>Simplest Sliding Image Slider</h1>
</header>
<div id="content">
<div id="slider_container">
<div id="slider">
<div class="slides" id="slide1">
<img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="" />
</div>
<div class="slides" id="slide2">
<img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt="" />
</div>
<div class="slides" id="slide3">
<img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt="" />
</div>
</div>
</div>
</div>
<footer></footer>
</div>
</body>
JS
jQuery(document).ready(function($) {
// start slider function
startSlider();
// set width and step variables and add active class to first slider
var slideWidth = $('.slides').width();
$('#slide1').addClass('slides active');
// actual function
function startSlider() {
looper = setInterval(function() {
// remove and add class active
$('.active').removeClass('active').next().addClass('active');
// animation expression
$('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
// return to first slide after the last one
if($('.active').length == 0) {
$('#slide1').addClass('active');
$('.slides').animate({'left': 0}, 500);
}
}, 5000); // interval
// adding controls
$('.slides').append("<div class='controls'><a class='control_left' href='#'></a><a class='control_right' href='#'></a></div>");
// remove unnecessary controlls on first and last slides
$('.slides:nth-child(1) a.control_left').remove();
$(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove();
// add functionality to controls
$('.control_left').on('click', function() {
$('.active').removeClass('active').prev().addClass('active');
$('.active').animate({'left': '+=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '+=' + (slideWidth) + 'px'}, 500);
});
$('.control_right').on('click', function() {
$('.active').removeClass('active').next().addClass('active');
$('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
$('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
});
}
});
Thx a lot in advance

Slideshow with prev/next buttons, autoslide, pause on hover
Instead of jQuery's .animate() and animating the left CSS property, use the GPU accelerated CSS transform: translateX for the animation on a common slides wrapper element
$(".SlideShow").each((i, EL) => {
const
$parent = $(EL),
$slides = $(".SlideShow-slides", EL),
$item = $(".SlideShow-item", EL),
$prevNext = $(".SlideShow-btn", EL),
tot = $item.length,
mod = (n, m) => ((n % m) + m) % m;
let
c = 0,
itv;
const prev = () => {c = mod(--c, tot); anim();};
const next = () => {c = mod(++c, tot); anim();};
const anim = () => $slides.css({transform: `translateX(-${c * 100}%)`});
const stop = () => clearInterval(itv);
const play = () => itv = setInterval(next, 4000);
$prevNext.on("click", (ev) => $(ev.currentTarget).is(".next") ? next() : prev());
$parent.hover(stop, play);
play(); // start
});
.SlideShow {
position: relative;
overflow: hidden;
width: 100%;
height: 180px;
}
.SlideShow-slides {
display: flex;
flex-flow: row-nowrap;
height: 100%;
width: 100%;
transition: transform 0.7s; /* Animation duration here */
}
.SlideShow-item {
min-width: 100%;
}
.SlideShow-item>img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.SlideShow-btn {
position: absolute;
top: 0;
z-index: 1;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
opacity: 0.5;
border: 0;
cursor: pointer;
}
.SlideShow-btn:hover {
opacity: 1;
}
.SlideShow-btn.next {
right: 0px;
}
<div class="SlideShow">
<div class="SlideShow-slides">
<div class="SlideShow-item"><img src="http://placehold.it/600x400/0bf?text=A" alt=""></div>
<div class="SlideShow-item"><img src="http://placehold.it/600x400/fb0?text=B" alt=""></div>
<div class="SlideShow-item"><img src="http://placehold.it/600x400/0fb?text=C" alt=""></div>
</div>
<button type="button" class="SlideShow-btn prev"></button>
<button type="button" class="SlideShow-btn next"></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

What you need to do it to clear the interval in the button clicks and start interval again.
function resetInterval(){ //add this method which wil reset the timer
window.clearInterval(looper); //clear current interval
looper = setInterval(autoSlide, 5000); //start auto slide again.
}
function autoSlide(){ //move this to a function from being anonymous
// remove and add class active
$('.active').removeClass('active').next().addClass('active');
// animation expression
$('.active').animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
$('.active').siblings().animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
// return to first slide after the last one
if ($('.active').length === 0) {
$('#slide1').addClass('active');
$('.slides').animate({
'left': 0
}, 500);
}
}
and
$('.control_left').on('click', function () {
resetInterval(); //reset it
....
$('.control_right').on('click', function () {
resetInterval(); //reset it
....
Demo

How to create circular animation with different objects using jQuery?

How to create circular animation with different objects using jQuery. I have tried myself but the issue is that my scrip is not running smoothly.
I want this animate but in smooth way:
Efforts :
http://jsfiddle.net/eT7SD/
Html Code
<div id="apDiv1"><p><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/></p></div>
<div id="apDiv2"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZv4hqGcyV6OqP0hI3uAiQVwHHgPuqcTl2NppFRyvbxXLVokbs" width="200" height="115" id="img-2"/></p></div>
<div id="apDiv3"><p><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQaplzZIaF-uTQKnvfK9N9i-Rg27F6aHtSchQZaGR-DITgO1bDwzA" width="200" height="115" id="img-3"/></p></div>
<div id="apDiv4"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjTbe5WfEnT840gIChKfbzlVnoPPoZsyrT4zjMReym9YpsRdOFvA" width="200" height="115" id="img-4"/></p></div>
<div id="apDiv5"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWtiMAcxGe-RQw2gRwUUiyB5aRTMeVMG5LSCPF0Qpzes-USpgyTw" width="200" height="115" id="img-5"/></p></div>
<div id="apDiv6"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXDhOygDcNsNVsv0eIXLYdBx4C-tmedIRhFfxGlCoCfNy04YU_" width="200" height="115" id="img-6"/></p></div>
<div id="apCenterDiv"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR42cgsKsYMWey79jT0XsTkMOyxc9oej9fVt-udxQvnVFOadpPQ" width="200" height="115" /></div>
Css Code
<style type="text/css">
#apCenterDiv {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 571px;
top: 209px;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 570px;
top: 4px;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 821px;
top: 134px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: 822px;
top: 328px;
}
#apDiv4 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 572px;
top: 385px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 319px;
top: 329px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:7;
left: 319px;
top: 135px;
}
</style>
Script
<script>
$(document).ready(function(e) {
setInterval(function() {
var imgfirstSrc = $("#img-1").attr("src");
var imgSecSrc = $("#img-2").attr("src");
var imgthirdSrc = $("#img-3").attr("src");
var imgfourthSrc = $("#img-4").attr("src");
var imgfifthSrc = $("#img-5").attr("src");
var imgsixthSrc = $("#img-6").attr("src");
$("#img-2").attr("src",imgfirstSrc);
$("#img-3").attr("src",imgSecSrc);
$("#img-4").attr("src",imgthirdSrc);
$("#img-5").attr("src",imgfourthSrc);
$("#img-6").attr("src",imgfifthSrc);
$("#img-1").attr("src",imgsixthSrc);
},1000);
});
</script>
EDIT
I have to add more animation with click/stop events. When user click the red image place of 270 they have to replace the place of 90 and animation will be stop; for more clarification you have to see the image below. I have tried #Cristi Pufu code but I want more modification
Efforts
http://jsfiddle.net/SaNtf/

Using jQuery Animation: http://jsfiddle.net/eT7SD/6/
Using mathand jQuery : http://jsfiddle.net/eT7SD/7/
Using CSS3 Rotation (just for fun): http://jsfiddle.net/dMnKX/
Just add a class 'box' to your animating divs like in the fiddle and use this js:
$(document).ready(function(e) {
var animate = function(){
var boxes = $('.box');
$.each(boxes, function(idx, val){
var coords = $(boxes[idx+1]).position() || $(boxes[0]).position();
$(val).animate({
"left" : coords.left,
"top" : coords.top
}, 1500, function(){})
});
}
animate();
var timer = setInterval(animate, 2000);
});
EDIT:
$(document).ready(function(e) {
var angles = [90, 45, 315, 270, 225, 135];
var unit = 215;
var animate = function(){
$.each($('.box'), function(idx, val){
var rad = angles[idx] * (Math.PI / 180);
$(val).css({
left: 550 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
angles[idx]--;
});
}
var timer = setInterval(animate, 10);
});
You have to change the left, top, width, height properties of boxes, standardize them, set the correct unit (circle radius) and initial angles. But for a preview, i think this is what you want (just needs a little more work).
Example: http://jsfiddle.net/eT7SD/7/
Visual understanding of angles:

Just use CSS3 to rotate the image:
html
<div id='container'>
... (all your images here)
</div>
javascript:
<script type='text/javascript'>
window.myRotation=0;
$(document).ready(function(e) {
setInterval(function() {
$("#container").css("transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-ms-transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-webkit-transform","rotate(" + window.myRotation + "deg)");
window.myRotation +=20;
},50);
});
</script>

Well I tried out something, I think it could work
NOTE: this is not the complete code and only an example of how it could work
FIDDLE: http://jsfiddle.net/Spokey/eT7SD/2/
NEW FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/ (6 images)
I used .position() from jQuery to get the positions of div1 - div6.
Then moved the image there using .animate().
http://api.jquery.com/position/
http://api.jquery.com/animate/
HTML
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/>
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-2"/>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apCenterDiv"></div>
JavaScript
$(document).ready(function(e) {
var i = 1;
var j = 2;
setInterval(function() {
if(i===7){i=1;}
if(j===7){j=1;}
var divd = $("#apDiv"+i).position();
var divds = $("#apDiv"+j).position();
$("#img-1").stop().animate({left:(divd.left), top:(divd.top)});
$("#img-2").stop().animate({left:(divds.left), top:(divds.top)});
i++;j++;
},1000);
});

How to rotate a div in opera browser

I want to rotate a div in 20 degrees in below opera 10.50 versions
below is my Javascript code for rotate the div:
<script type="text/javascript">
function rotator(value) {
document.getElementById('divId').style.webkitTransform = "rotate(" + value + "deg)";
document.getElementById('divId').style.msTransform = "rotate(" + value + "deg)";
document.getElementById('divId').style.MozTransform = "rotate(" + value + "deg)";
document.getElementById('divId').style.OTransform = "rotate(" + value + "deg)";
document.getElementById('divId').style.transform = "rotate(" + value + "deg)";
document.getElementById('span1').innerHTML = value + " deg";
}
</script>
HTML Code:
<body>
<div id="divId" style="height: 150px; width: 150px background-color:red; border: 1px solid #000;">
This is Rotator Div
</div>
<br />
Rotate:
<input type="range" min="-360" max="360" value="0" onchange="rotator(this.value)" /><br />
Rotate Div in <span id="span1">Zero deg</span>
</body>
How can I resolve my problem?

CSS rotate transforms are not supported in Opera versions below 10.5, that's why this JavaScript method of you doesn't work.
See: http://caniuse.com/#feat=transforms2d
What you can do is rotate your image in photoshop and then upload that image with a transparent background, but then the image would be static of course and I doubt that's what you desire.

jquery Slidebar not working in IE

Could anyone eplain to me, why this isn't working in IE?
It's fading perfectly into each image in other browsers, but when executed in IE, it only shows the last image(image 5) and stays that way.
And maybe come up with a possible solution ? I am very new to jquery
JS:
var rotationTime = 3000;
var fadeTimer = 500;
var zStart = 25;
var totalBanners;
var currentImage = 1;
$(document).ready(function(){
totalBanners = $('#fade-slider > div').length;
for(i=1;i<=totalBanners;i++){
$('#img-' + i).css('z-index', '' + (zStart-i) + '');
}
$(document).everyTime(rotationTime, 'imagefader', function(){
if(currentImage < totalBanners){
$('#img-' + currentImage).animate({opacity: 0}, fadeTimer);
currentImage += 1;
}
else{
currentImage = 1;
$('#img-' + currentImage).animate({opacity: 1}, fadeTimer, 'linear', function(){
for(i=1;i<=totalBanners;i++){
$('#img-' + i).animate({opacity: 1}, 0);
}
});
}
}, 0);
});
CSS:
#charset "UTF-8";
#fade-slider {
width:570px;
height:207px;
overflow:hidden;
margin:0px;
padding:0px;
position:relative;
}
.position-zero {
position:absolute;
top:0px;
left:0px;
}
HTML:
<div id="fade-slider">
<div id="img-1" class="position-zero"><img src="images/slider/image-1.jpg" alt="Image1" /></div>
<div id="img-2" class="position-zero"><img src="images/slider/image-2.jpg" alt="Image2" /></div>
<div id="img-3" class="position-zero"><img src="images/slider/image-3.jpg" alt="Image3" /></div>
<div id="img-4" class="position-zero"><img src="images/slider/image-4.jpg" alt="Image4" /></div>
<div id="img-5" class="position-zero"><img src="images/slider/image-5.jpg" alt="Image5" /></div>
</div>

I believe you're taling about IE8 - when mentioning IE ...
opacity
will not work properly in IE8 , try something like this
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
that last part 'Opacity=50' would equal opacity: .5 just adjust accordingly
for IE5- IE7 try this
filter: alpha(opacity=50);