jquery控制图片由中心点缓慢变大效果

制作样式如上

附上主要代码

<script>
    $(function(){
        $("img").mouseover(function(){
            $(this).parent(".col").animate({
                width:"310px",
                height:"210px"
            },"normal");
        });

        $("img").mouseout(function(){
            $(this).parent(".col").animate({
                width:"300px",
                height:"200px"
            },"normal");
        });

    });
</script>

这里主要用到了animate方法 其中可以设置动画执行的时间 

4中方式

1） 自己制定时间 1200  (代表1.2秒)

2）“normal”: 一般速度

3)  “slow”：速度很慢

4)  "fast" :速度很快

注意点:

开始的时候 使用$(".col").mouseout 这样的形式来写的 但是这样会多次触发mouseout以及mouseover事件  因为在里层还有img标签 相当于触发img的父元素col又触发了img元素

解决方法:

1)   如上图所示 选择最内部的元素 触发相关事件即可

2)   将mouseout以及mouseover换成 mouseleave以及mouseenter即可  后者只会触发一次 不管是否触发他的子元素!