0

私の会社の Web サイトで、チーム メンバーの 4 つのサムネイルの行があり、サムネイルがクリックされたときに下にスライド/フェードインし、サムネイルがもう一度クリックしました。

以下のコードでこれを達成しました：

$(".team-desc").hide(); //hide all the team descriptions


  $(".team-toggle").click(function () {
        var divname= this.getAttribute('data-team');
          $("#"+divname)
          .slideToggle("slow")
          .animate(
            { opacity: 1 },
            { queue: false, duration: 'slow' }
            )
          .siblings()
          .hide();
        });

これは期待どおりに機能するので、ほとんどありません。

私が達成したいのは、1 つのバイオが既に表示されている場合に、チーム メンバーのバイオを切り替えるときに現在得られる折りたたみ効果と拡張効果を回避するために、バイオ間をフェードする方法です。

bio div が現在表示されているかどうかをテストしてこれを行う必要があると想定していますが、これを機能させるためにコードを分解する方法がわかりません。

どんな助けや指針も大歓迎です。

情報については、私のhtmlマークアップは次のとおりです。

<li class="team-toggle" data-team="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></li>

と

<div class="team-desc" id="<?php the_title(); ?>">
   <?php the_content(); ?>
</div>
4

2 に答える 2

0 
$(".team-desc").hide();

$(".team-toggle").click(function () {
    var divname = $(this).data('team'),
        visible = $(".team-desc").is(':visible');

    if (visible) {
        $("#"+divname).fadeIn('slow').siblings(':visible').fadeOut('slow');
    }else{
        $("#"+divname)
              .slideToggle("slow")
              .animate(
                { opacity: 1 },
                { queue: false, duration: 'slow' }
               )
              .siblings()
              .hide();
    }
});
于 2013-03-28T01:14:39.580 に答える
0

次のようなものを使用して、いつでもすべての要素を選択し$.each()て操作できます。

$('.your-elements').each(function(){
    $(this).click(function() {
    if ($(this).is(':visible')) {
        $('.your-elements').not($(this)).stop().animate({
           // ...
        });
    } else {
        $(this).stop().animate({
            // ...
        });
        $('.your-elements').not($(this)).stop().animate({
           // ...
        });
    }
    });
});
于 2013-03-28T01:18:17.697 に答える