0

在我的公司网站上，我正在尝试创建一个与团队会面的部分，其中我有一排四个团队成员的缩略图，我希望他们的简历在单击缩略图时滑动/淡入下方，并在缩略图时滑动/淡出再次点击。

我用下面的代码实现了这一点：

$(".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();
        });

这几乎可以按预期工作。

我想要实现的是一种在 bios 之间淡入淡出的方法，如果一个 bios 已经可见，以避免在团队成员 bios 之间切换时我目前得到的折叠然后扩展效果。

我假设这需要通过测试当前是否可见任何 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 回答