Question

我是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"});
    });

我已经包含了十字形的图像，但只是在标签完全展开时才能看到图像。

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

我也觉得我现在的代码有点臃肿，如果你能让我知道如何简化这一点，我将非常感激。

提前致谢

Answer 1

嗯，为什么不在加载时用.hide（）隐藏它，并在展开时用.show（）显示它？

Answer 2

嗯，这似乎有效。不是我尽力而为，但你知道。编辑：这好多了。

<强> 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/

愚蠢的表演/隐藏被黑客攻击。但它有效......

jquery切换，添加图像以关闭

2 个答案: