To flip images using jquery

Question

I have multiple images and want to rotate images in 3d and 2d one by one display.

HTML is like

<div><img src="1.jpg"></div>
<div><img src="2.jpg"></div>
<div><img src="3.jpg"></div>

etc

So I want to display image by previous image flip out and next flip in.

I have tried below code

To hide:

$hide.animate({ 
   transform: 'rotate(180deg)', 
   opacity: 0.1 
},
1500,
'easeInOutBack', 
function () { 
    $(this).hide(); 
});

To Show:

$show.show().animate({ transform: 'rotate(180deg)', opacity: 1.0 },1500,'easeInOutBack');

But it is not working. I am using jquery and jquery ui only.

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

you don't animate rotation with jQuery, let CSS do that for you.

try this:

js:

$hide.addClass('hide').removeClass('show');
$show.removeClass('hide').addClass('show');

css:

.show, .hide{transition:all 0.3s ease;}
.hide{opacity:0.1;transform:rotate(0deg);}
.show{opacity:1;transform:rotate(1800deg);}

hope that helps.

EDIT:

if you still wish to use jQuery and not CSS, i'd suggest a plugin such as http://nnattawat.github.io/flip/

EDIT2:

if you still don't want the CSS approach, and not a jQuery plugin, i suggest you take a look here: CSS rotation cross browser with jquery.animate()

"CSS-Transforms are not possible to animate with jQuery, yet. You can do something like this [code sample]"

i also created a fiddle to demonstrate this approach: http://jsfiddle.net/jhcvb2ty/

edited May 23 '17 at 12:14

Community

1
1

answered Jun 03 '15 at 12:45

geevee

5,411
5
30
48

I know about plugins and if i need to use plugin, no need to put question here :) – Bhumi Shah Jun 03 '15 at 12:51
1

@BhumiShah plugins are not magic! Take a look at the code and copy what you'd need! – lshettyl Jun 03 '15 at 12:52
@BhumiShah this question will give you what you need: http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate – geevee Jun 03 '15 at 12:52
I've tried this but not working.can you create demo for my requirement? – Bhumi Shah Jun 03 '15 at 12:55

Keval Bhatt · Answer 2 · 2015-06-13T10:04:00.130

Basic animates can't animate non-numeric CSS properties.

so use step function in animate then it works.

See example: http://jsfiddle.net/kevalbhatt18/epp06LL3/2/

 $('#box').animate({  transformValue: -180 }, {
    step: function(now,fx) {
      $(this).css('transform','rotatex('+now+'deg)');  
    },
    duration:'slow'
},'linear');

EDIT:

See example: http://jsfiddle.net/kevalbhatt18/u2ptr4jp/4/

Now simply add div inside parent span it will work for all.

Note: only first class you should know i.e in this example we have box class so if we are at last box then it will flip to first box

$("div").click(function() {
    var that = this;
    $(this).animate({
        transformValue: -180
    }, {
        step: function(now, fx) {
            $(this).css('transform', 'rotatey(' + now + 'deg)');
        },
        complete: function() {
            $(that).hide();
            //$('#box').removeAttr( 'style' );
            var nextObject = $(that).next()
             var nextClass = nextObject.attr('class')
            console.log($('#parent').children().hasClass(nextClass));
            if ($('#parent').children().hasClass(nextClass)) {
                var flipNext = nextClass;
                console.log("true")
            } else {
                console.log("false")
                var flipNext = "box";
                console.log(flipNext);
            }

            secondFlip(flipNext, that);


        },
        duration: 'slow'
    }, 'linear');


});

function secondFlip(nextID, that) {
    $('.' + nextID).show();
    $('.' + nextID).animate({
        transformValue: 180
    }, {
        step: function(now, fx) {
            $(this).css('transform', 'rotatex(' + now + 'deg)');
        },
        complete: function() {

        },
        duration: 'slow'
    }, 'linear');

}

Edit: rotation issue solved

see this example: http://jsfiddle.net/kevalbhatt18/u2ptr4jp/6/

Final Output:

After so many tray I found solution.

see this example:http://jsfiddle.net/kevalbhatt18/oh07zuh0/

hear i find transformation degree.

(function ($) {
    $.fn.rotationDegrees = function () {
        var matrix = this.css("-webkit-transform") || this.css("-moz-transform") || this.css("-ms-transform") || this.css("-o-transform") || this.css("transform");
        if (typeof matrix === 'string' && matrix !== 'none') {
            var values = matrix.split('(')[1].split(')')[0].split(',');
            var a = values[0];
            var b = values[1];
            var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
        } else {
            var angle = 0;
        }
        return angle;
    };
}(jQuery));

ok i will update my fiddle and i give solution for animation — Keval Bhatt, Jun 03 '15 at 13:20
now check i updated answer if you want any help let me know :D — Keval Bhatt, Jun 05 '15 at 07:27
*Now it will not flip 2 time it is because of rotation dagree* http://jsfiddle.net/kevalbhatt18/u2ptr4jp/6/ try this one there is one problem now that you can find and solved it — Keval Bhatt, Jun 05 '15 at 08:24
finally i done with it :D see example in answer : or click hear http://jsfiddle.net/kevalbhatt18/oh07zuh0/ Bhumi Please let me know if you have any query — Keval Bhatt, Jun 13 '15 at 10:04

To flip images using jquery

2 Answers2