1

オン/オフを切り替える要素が表示されているかどうか、または「:visible」セレクターを使用していないかどうかを確認して、リンク コントロールの不透明度を切り替えようとしています。次のマークアップがあります:-

<div class='btns'></div>
<p class='text'>Hello world</p>

このjQueryを使用すると:-

var text = $('.text');
text.hide();
var btn = $('<a>', {
    'href': '#',
    'text': 'click me',
    'click': function(e){
        e.preventDefault();
        text.slideToggle();
        var opacity = text.is(':visible').length ? 1 : .5;
        $('.btns').animate({
            'opacity': opacity
        });
    }
});

$('.btns').append(btn);

リンクが最初にクリックされると、リンクは正しく半分の不透明度にフェードしますが、その後のクリックでは不透明度は変わりません。これはjsFiddleで実際に確認できます。

「:visible」セレクターがさらにクリックすると失敗するのはなぜですか? これに対するより良いアプローチはありますか？

これがここですでに回答されている場合はお詫びしますが、私の特定の質問に対する回答を見つけることができませんでした.

4

2 に答える 2

1

私はあなたが変更する必要があると思います：

var opacity = text.is(':visible').length ? 1 : .5;

に

var opacity = $('.btns').css('opacity')==0.5 ? 1 : 0.5;
于 2012-11-19T15:56:32.630 に答える
1

本当にテキストのプロパティをテストしたい場合は、これを行うことができます:

var opacity = text.css('display') == 'none' ? .5 : 1;
text.slideToggle();

アニメーション中に表示が「なし」になることはないため、アニメーションを開始する前に必ずテストしてください。

テストするプロパティをよりよく理解するために、(クロムを使用している場合) アニメーション化されたテキストを右クリックし、要素を調べてから、トグルを有効にしたときにどのスタイル パラメーターがライブで変更されているかを注意深く確認することをお勧めします。

于 2012-11-19T16:55:37.893 に答える