jQuery之图片关联伸缩效果

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

 

这里要介绍的这个效果又称为手风琴效果。用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()这个很神奇很伟大很实用的函数,我感觉就是个动画函数,实现滑动效果,包括位置的移动,透明度改变,paddingmargin间距值改变等,有兴趣可以去研究一下。

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

(本篇完)

分享到:
×


发表评论(目前8 条评论)

  1. yoomin说道:

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

  2. Barret说道:

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

  3. pigaret说道:

    新手来试试:
    (试了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);

    }

    });

  4. 肥皂说道:

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

  5. 流水说道:

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

  6. wkylin说道:

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