0

現在、Web チュートリアルにある以下のコードを使用して、DIV を表示/非表示にしています。それはうまく機能しますが、効果が好きではありません。代わりに DIV をフェードイン/フェードアウトさせたい (または、今のところ DIV が右上隅から成長しているよりスムーズなもの)。これを行うためにコードをどのように適応させることができますか? ここでそれを確認してくださいhttp://jsfiddle.net/Grek/w4HWn/1/どうもありがとう

function showonlyone(thechosenone) {
     $('.textzone').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(2000);
          }
          else {
               $(this).hide(2000);
          }
     });
}
4

2 に答える 2

5

とに変更.hide()するだけです.fadeOut().show().fadeIn()

しかし、あなたの例を見ると、データ属性を使用することではるかに簡単に行うことができます.

この例を見てください。

2 つの div がフェード インおよびフェード アウト中に積み重なるため、絶対配置またはその他の手法が必要になる場合があります。

于 2012-08-12T20:48:30.750 に答える
1

fadeInとメソッドを使用できますfadeOut。コードを縮小することもできます。次のことを試してください。

function showonlyone(thechosenone) {
     $('.textzone').fadeOut();
     $('#'+thechosenone).fadeIn();
}

jQueryを使用しているので、jQueryclickハンドラーを使用できます。

HTML：

<div class="source-title-box"><span class="activity-title"><a href="#source-region">Our region</a></span></div>
<div class="source-title-box"><span class="activity-title"><a href="#source-oursource">Our source</a></span></div>

jQuery：

$('.activity-title a').click(function(e){
    e.preventDefault()
     var thechosenone = $(this).attr('href');
    $('.textzone').fadeOut(600, function(){
         $(thechosenone).fadeIn(600);
    });   
})

デモ

于 2012-08-12T20:56:45.317 に答える