CODEWITHSUNDEEP
javascriptjquerycss
user2648752
user2648752

Reputation: 2221

how to change or move image using transform?

I want to move a div (every in screen where user click).I take whole width and height of screen. than get the coordinate of x and y where user click on screen.Now I need to shift that div using transform/transition not using jQuery animate function ;

http://jsfiddle.net/MbJJ6/388/

$(document).ready(function () {
    $("#a").click(function (e) {
        console.log("dd")
        console.log(e.pageX);
        console.log(e.pageY);

        $('#foo').css({
            'right': '',
            'left': '0px'
        }).animate({
            'left': '30px'
        });
    })
})

Thanks

Upvotes: 0

Views: 64

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115232

Try this

SCRIPT

$(document).ready(function(){
$(this).click(function(e){
    $('#foo').animate({
      'left' : e.pageX-50+'px',
      'top':e.pageY-50+'px'
   });       
   });   

});

HTML

    <div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>

check it on here

Upvotes: 1

Ani
Ani

Reputation: 4523

I am not sure if this is what you want - Check this out JSFIDDLE - http://jsfiddle.net/MbJJ6/392/

CSS

.clicked{
   -webkit-transition:1s;
   margin-left:50px;
}

JS

$(document).ready(function(){

   $("#foo").click(function(e){
      console.log("dd")

      console.log(e.pageX );
      console.log(e.pageY );
      $(this).toggleClass('clicked');    
   }) ;

});

Upvotes: 0

Related Questions