Question

我有一个图像面板，点击后，它会淡出并显示背后的视频。当我点击另一个像它的id来做同样的动作时，但前一个项目已经让图像淡出并显示视频，将图像淡入并覆盖该视频。

这意味着这只是一次显示的视频。

jQuery的：

$( ".video-link" ).click(function() {
    $(this).fadeOut( "slow");
});

HTML：

<li class="item" data-factor="1">
                        <div class="video-panel-wrap">
                            <div class="video-link">
                                <img src="<?php the_sub_field('video_image'); ?>" />
                                <div class="caption">
                                    <div>
                                        <div>
                                            <h3><?php the_sub_field('video_title'); ?></h3>
                                            <span class="excerpt"><?php the_sub_field('video_description'); ?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="video-player">

                                    <?php if( get_sub_field('vimeo') ): ?>
                                         <iframe src='http://player.vimeo.com/video/<?php the_sub_field('vimeo'); ?>' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                                     <?php endif; ?>
                                     <?php if( get_sub_field('youtube') ): ?>
                                        <iframe width="560" height="315" src="http://www.youtube.com/embed/<?php the_sub_field('youtube'); ?>" frameborder="0" allowfullscreen></iframe>
                                     <?php endif; ?>

                            </div>
                        </div>
                    </li>

Answer 1

如果我理解你的问题：

$( ".video-link" ).click(function() {

    // Fade back in all but the clicked video-link
    $(".video-link").not(this).fadeIn();

    // Just fadeout the clicked one
    $(this).fadeOut( "slow");
});

如果这会导致fadeIn现有元素，您可以检查它们是否可见，或者只是将不透明度设置为0（而不会更改那些已经处于不透明度0的元素）。

$( ".video-link" ).click(function() {

    // Fade back in all but the clicked video-link
    $(".video-link").not(this).animate({opacity: 0});

    // Just fadeout the clicked one
    $(this).fadeOut( "slow");
});

在一个div上淡出图像但触发图像在同一个类的其他div上淡入

1 个答案: