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
});
});
});
});
});
精彩评论