0

我是 jQuery 新手，并创建了一个选项卡，单击时会滑出。我想添加一张图片让用户知道可以点击标签来隐藏它。

我目前在这里有这个 jsfiddle http://jsfiddle.net/KcF4u/1/

我目前的代码是

$('.box, aside h2').delay(2000);
$('.box').animate({ right:"-12"});
$('aside h2').animate({ right:"270"});
    $("aside h2").toggle(function(){
    $('.box').animate({ right:"-335"});
    $('aside h2').animate({ right:"-55"});
    },function(){
        $('.box').animate({ right:"-12"});
        $('aside h2').animate({ right:"270"});
    });

我已经包含了十字架的图像，但只希望在选项卡完全展开时才能看到图像。

任何想法如何做到这一点？

我也觉得我当前的代码有点臃肿，如果你能告诉我如何简化它，我将不胜感激。

提前致谢

4

2 回答 2

0

嗯，你为什么不在加载时用 .hide() 隐藏它，在展开时用 .show() 显示它？

于 2012-09-15T22:51:01.490 回答
0

好吧，这似乎有效。不是我的最大努力，但你知道。编辑：那好多了。

CSS

#news img {
    position: absolute;
    top: 6px;
    left: -65px;
    display: none;
}

Javascript

var $aside = $('#news'),
    $box = $aside.find('.box'),
    $h2 = $aside.find('h2'),
    $img = $box.find('img');

$aside.on('click', 'h2, .box img', toggle);

$h2.data('toggleout', false);

setTimeout(toggle, 2000);

function toggle() {
    var pos = [-12, 270],
        active = true;

    if ($h2.data('toggleout')) {
        pos = [-355, -55];

        $img.hide();

        active = false;
    }

    $box.animate({right: pos[0]});
    $h2.animate({right: pos[1]}, show);

    $h2.data('toggleout', !$h2.data('toggleout'));

    function show() {
        !active || $img.show();
    }
}

http://jsfiddle.net/userdude/KcF4u/4/

愚蠢的表演/隐藏被黑客攻击在一起。但它的工作...

于 2012-09-15T23:17:22.023 回答