CODEWITHSUNDEEP
jquery
kobe
kobe

Reputation: 15835

How to pop image out of a div a little

I have images in a row , I want to popout image a alit from the div as it moving and coming out. When we mouseover it should move a little bit.

May I know how to do this?

Upvotes: 0

Views: 288

Answers (1)

John Hartsock
John Hartsock

Reputation: 86862

I think this is what your asking for: Using jQuery animate()

$(document).ready(function() {
  $("#yourImageIdOrSelector").mouseover(function () {
    var $this = $(this);
    $this.animate({left: '+=5'}, 'fast', function() {
      $this.animate({left: '-=10'}, 'fast', function() {
        $this.animate({left: '+=5'}, 'fast', function() {
          //animation finished
        });
      });
    });
  });
});

Here is an demo http://www.jsfiddle.net/xbBQa/3/

EDITED: Making the image appear to come closer to you or get larger. Sorry your question was hard to understand. I did my best the first time. But here is a second stab at it. below is the code and here is a link to a demo http://www.jsfiddle.net/xbBQa/5/

$(document).ready(function() {
  $("#myimage").mouseover(function () {
    var $this = $(this);
      $this.animate({height: '+=5', width: '+=5'}, 'fast', function() {
      $this.animate({height: '-=10', width: '-=10'}, 'fast', function() {
        $this.animate({height: '+=5', width: '+=5'}, 'fast', function() {
          //animation finished
        });
      });
    });
  });
});

Upvotes: 2

Related Questions