通过鼠标悬停切换打开,然后通过移出来关闭,而不是通过单击

时间:2012-06-20 06:19:26

标签: javascript jquery stack toggle

jQuery“切换”功能问题。

可以通过鼠标悬停启动并通过mouseout关闭来打开,但不能通过单击...

目前的情况如下:http://temp.wave-pr.com.hk/gbf/dock

如何通过鼠标悬停和鼠标移除来打开和关闭它?

js如下:

$(function () { 
// Stack initialize
var openspeed = 300;
var closespeed = 100;
$('.stack>img').toggle(function(){
    var vertical = 0;
    var horizontal = 0;
    var $el=$(this);
    $el.next().children().each(function(){
        $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
        vertical = vertical + 55;
        horizontal = (horizontal+.75)*2;
    });
    $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
       .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
    $el.animate({paddingTop: '0'});
}, function(){
    //reverse above
    var $el=$(this);
    $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
    $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
    $el.animate({paddingTop: '35px'});
});
// Stacks additional animation
$('.stack li a').hover(function(){
    $("img",this).animate({width: '56px'}, 100);
    $("span",this).animate({marginRight: '10px'});
},function(){
    $("img",this).animate({width: '50px'}, 100);
    $("span",this).animate({marginRight: '0'});
});

});

1 个答案:

答案 0 :(得分:1)

使用.toggle函数代替.hover。前,

$('.stack>img').hover(function() {
    //previos was togle