CODEWITHSUNDEEP
javascriptjqueryrotation
01e5Dk
01e5Dk

Reputation: 400

About image rotation once element with specific id is clicked

Logo and elements from ul once clicked rotates image. By default image is already rotated by certain degrees, then on each click image rotates to necessary value.

So far I was using the following:

$("#objRotates").css('opacity','.2');
var value = 0;
var prev_value = 0;
$( "li" ).click(function() {
    var text=$(this).text();
    if(text==="text1"){value=0;}
    if(text==="text2"){value=33;}
    if(text==="text3"){value=66;}
    if(prev_value != value){
        $("#objRotates").animate({opacity:'1'});
        $("#objRotates").rotate({
            animateTo:value,
            easing: $.easing.easeInOutExpo,
            center: ["25px", "150px"],
            callback: function(){$("#objRotates").animate({opacity:'0.2'});}
        });
    }
    prev_value = value;
});

Above code is the one that was used before, where images start position was 0 and its animation was triggered from link text.

Using jqueryRotate.js examples(here)

How do I change the code, so that images start position is certain degrees and animation starts if element with specific ID is clicked?

Give at least clue..Cause for now, looking at my old code, I am lost. Thanks in advance.

SIMPLIFIED FIDDLE

Upvotes: 0

Views: 170

Answers (1)

Howard Renollet
Howard Renollet

Reputation: 4739

Ok, so I've created a couple of samples for you to check out. The first one is very basic and I've simplified the code a little to make it easier to understand. This one just uses completely static values and a static elementId for the event, which I'm pretty sure answers your question based on your response to my comment yesterday. http://jsfiddle.net/x9ja7/594/

$("#elementId").click(function () {
    var startingAngle = 45;
    var endingAngle = 90;
    var elementToRotate = "img";
    $(elementToRotate).rotate({
        angle: startingAngle,
        animateTo: endingAngle
    });
});

But I wanted to give another example as well that would be dynamic and repeatable for multiple elements. With the code above, you would have to copy/paste the same code over and over again if you want to perform this animation by clicking different elements. Here's an alternative. In this example, you set all of your parameters in the data attributes in the clickable element, then the function is completely repeatable, you only have to write it once. Less code = everyone happy! Here's the example: http://jsfiddle.net/x9ja7/595/

//#region Default starting angles
$("#image1").rotate({ angle: 90 });
$("#image2").rotate({ angle: 20 });
//#endregion

$(".rotateAction").click(function () {
    //#region Optional parameter - used in the optional callback function
    var $self = $(this);
    //#endregion
    var startingAngle = Number($(this).attr("data-startingangle"));
    var endingAngle = Number($(this).attr("data-endingangle"));
    var elementToRotate = $(this).attr("data-elementtorotate");

    //#region If the current angle is the ending angle, reverse the animation - this can be removed if you want, I thought it may be cool to show some of the things you can do with this.
    var currentAngle = $(elementToRotate).getRotateAngle();
    if ( currentAngle[0] === endingAngle) {
        startingAngle = Number($(this).attr("data-endingangle"));
        endingAngle = Number($(this).attr("data-startingangle"));
    }
    //#endregion

    $(elementToRotate).rotate({
        angle: startingAngle,
        animateTo: endingAngle
        //#region This is optional - uncommenting this code would make the animation single-use only
        //, callback: function () { $self.off().removeClass("clickable"); }
        //#endregion
    });
});

Hope this helps. If you need any other assistance, please let me know.

Upvotes: 1

Related Questions