0

フェード効果の有無にかかわらず、div を適切に表示および非表示にすることができません。以下は jsfiddle のコードです (便宜上): http://jsfiddle.net/bUjx7/1/

html:

<div class="container">
    <header>
        <ul class="sidenav">
            <li><h2><a data-region="nav-1" href="#"><span class="title">About</span></a></h2></li>
            <li><h2><a data-region="nav-2" href="#"><span class="title">Services</span></a></h2></li>
        </ul>
    </header>
    <div id="nav-1" class="infozone"><p>Hello I'm box 1.</p></div>
    <div id="nav-2" class="infozone"><p>Hello I'm box 2.</p></div>
</div>

CSS:

.infozone{
    float:left;
    position:relative;
    height:400px;
    width:800px;
    background-color: #000;
    background-color: rgba(0,0,0);
    display:none;
}

js:

$('.title a').click(function(){
  $('.infozone').fadeOut(550);
  var region = $(this).attr('data-region');    
  $('#' + region).fadeIn(550);
})
4

2 に答える 2

2

フィドルで jquery ライブラリの使用を選択していません。また、セレクターが正しくありません。.sidenav a代わりにある必要があり.title aます。今、それは動作します。jsfiddle で確認してください: http://jsfiddle.net/bUjx7/5/

$('.sidenav a').click(function(){
  $('.infozone').fadeOut(550);
  var region = $(this).attr('data-region');    
  $('#' + region).fadeIn(550);
});
于 2013-02-28T16:10:22.440 に答える
0

私の推測では、フェードインしようとすると、要素でフェードアウト効果がまだトリガーされていると思います。

$('.title a').click(function(){
  var region = $(this).attr('data-region');
  $( 'div' ).hasClass('infozone').not('#' + region).fadeOut(550);    
  $('#' + region).fadeIn(550);
});

私はこれをテストしていないので、うまくいくかどうか教えてください。基本的に、表示したい要素ではない infozone クラスを持つすべての要素で、fadeOut を呼び出しています。

于 2013-02-28T16:18:05.507 に答える