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 に答える