jQuery之图片关联伸缩效果

这篇文章发布于 2009年08月31日，星期一，16:37，归类于 jQuery相关。 阅读 49962 次, 今日 5 次 9 条评论

 

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=106

这里要介绍的这个效果又称为手风琴效果。用css就可以实现类似的效果，但是使用css只是单纯地将宽度变大和缩小，而使用jQuery可以实现流畅的动画效果，体验会更加不错的！

效果截图示意：

图片联动截图效果示意

您可以狠狠地点击这里：图片关联展开收缩demo实例页面

使用的源代码如下：

var elLists = $(".zxx_img_list");
elLists.mouseover(function(){
    elLists.not($(this)).stop().animate({
        width:"20%" 
    },500); 
    $(this).stop().animate({
        width:"38%" 
    },500);                               
}).mouseout(function(){
    elLists.stop().animate({
        width:"24.5%"   
    },500); 
});

这里的效果应用了animate()这个很神奇很伟大很实用的函数，我感觉就是个动画函数，实现滑动效果，包括位置的移动，透明度改变，padding，margin间距值改变等，有兴趣可以去研究一下。

然后，animate()执行前别忘记了先stop()下，否则效果会有不听使唤的感觉。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=106

（本篇完）

相关文章
«上一篇
下一篇»
分享到：
标签： , , , , , , , ,


发表评论（目前9 条评论）

  1. 小青蛙说道：
    2020年06月2日 18:27

    我现在看，打开的页面空白，是什么原因，谷歌和ie都试了的

    回复
  2. yoomin说道：
    2016年06月1日 15:00

    多滑了几下，然后动个不停……
    这类效果现在肯定都用CSS实现了，咯咯

    回复
  3. Barret说道：
    2015年12月21日 15:51

    鄙人闲来无事，偶然翻阅大神旧作，忆当年，也曾用过animate做过类似动画，无奈无良之人鼠标瞎滑动画给人效果就是延迟良久，遂弃之，换CSS3动画效果颇佳。

    回复
  4. pigaret说道：
    2015年07月19日 10:33

    新手来试试：
    （试了stop，发现animation会突然停掉，不知道怎么implement，所以还是用了setTimeout，测试可行，不过快速滑过的时候有些抖，求赐教怎样改进）

    $(document).ready(function(){

    //variables
    var $list = $(“.zxx_img_list”),
    expand_timer = 500,
    shrink_timer = 500,
    delay = 200,
    expandIt_timer;

    //mouseenter/mouseout events (less of a hassle than mouseover/mouseout events)
    $list.mouseenter(function(){

    //store a copy of this
    $self = $(this);
    //setTimeout – the item will only expand if the mouse is hovered on it over a certain amount of time
    expandIt_timer = setTimeout(function(){expandIt(expand_timer);},delay);

    }).mouseleave(function(){

    //clearTimeout
    if(window.setTimeout) clearTimeout(expandIt_timer);
    shrinkIt(shrink_timer);

    });

    //referring to the zxx’s original script
    function expandIt (timer){

    $list.not($self).animate({
    width:”20%”
    },timer);
    $self.animate({
    width:”38%”
    },timer);

    }

    function shrinkIt (timer){

    $list.animate({
    width:”24.5%”
    },timer);

    }

    });

    回复
  5. 肥皂说道：
    2012年02月2日 14:35

    没用.stop()停止动画再执行下一个

    回复
  6. 流水说道：
    2011年11月8日 11:29

    我记着有个叫博客园上有一篇文章,专门对手风琴效果做了很详细的阐述,包括animate的详细实现过程!

    回复
  7. wkylin说道：
    2010年11月5日 18:22

    在一个动画开始前是不是要先停止前一个动画效果？？？

    回复