开发者

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开发者_Go百科 as it moving and coming out. When we mouseover it should move a little bit.

May I know how to do this?


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
        });
      });
    });
  });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜