Question

我很好奇如何将其应用到我的网页上，如果你能看到这个网站：http://www.dynamicworks.eu/并点击顶部的任何链接，你会发现出现了白色背景的平滑淡入淡出。如果有人能告诉我怎么做，我会很高兴：）

Answer 1

按照以下代码段进行操作。请随时询问您的问题。

<script>
$(document).ready(function() {
$("div#answer_<?php echo get_the_ID();?>").hide();    
});
</script>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header page-header">
    <h1 class="entry-title"><?php the_title(); ?></h1>

    <div class="entry-meta text-muted">
        <?php ipt_kb_posted_on(); ?>
    </div><!-- .entry-meta -->
</header><!-- .entry-header -->

<div class="entry-content">
    <?php the_content(); ?>
    <table class="mcqtable">
        <tbody>
            <tr>
                <td class="index"><?php echo '<a id="index_A_'.get_the_ID ().'" href="javascript: void 0;">A.</a>';?>
                <td class="option"><?php echo get_post_meta($post->ID, 'option_A', true); ?></td>
                <td class="index"><?php echo '<a id="index_B_'.get_the_ID ().'" href="javascript: void 0;">B.</a>';?>
                <td class="option"><?php echo get_post_meta($post->ID, 'option_B', true); ?></td>
            </tr>
            <tr>
                <td class="index"><?php echo '<a id="index_C_'.get_the_ID ().'" href="javascript: void 0;">C.</a>';?>
                <td class="option"><?php echo get_post_meta($post->ID, 'option_C', true); ?></td>
                <td class="index"><?php echo '<a id="index_D_'.get_the_ID ().'" href="javascript: void 0;">D.</a>';?>
                <td class="option"><?php echo get_post_meta($post->ID, 'option_D', true); ?></td>
            </tr>
        </tbody>
    </table>
    <a class="view_answer_<?php echo get_the_ID(); ?>" href="javascript: void 0;">View Answer</a>
    <div id="answer_<?php echo get_the_ID();?>">
        <?php echo 'Correct Answer is: '.get_post_meta($post->ID, 'option_correct', true); ?>
    </div>
    <?php
        wp_link_pages( array(
            'before' => __( '<p class="pagination-p">Pages:</p>', 'ipt_kb' ) . '<ul class="pagination">',
            'after'  => '</ul><div class="clearfix"></div>',
        ) );
    ?>
</div><!-- .entry-content -->

<footer class="entry-meta text-muted well well-sm">
    <?php
        /* translators: used between list items, there is a space after the comma */
        $category_list = get_the_category_list( __( ', ', 'ipt_kb' ) );

        /* translators: used between list items, there is a space after the comma */
        $tag_list = get_the_tag_list( '', __( ', ', 'ipt_kb' ) );

        if ( ! ipt_kb_categorized_blog() ) {
            // This blog only has 1 category so we just need to worry about tags in the meta text
            if ( '' != $tag_list ) {
                $meta_text = __( 'This entry was tagged <i class="glyphicon glyphicon-tags"></i>&nbsp;&nbsp;%2$s. <br />Bookmark the <i class="glyphicon glyphicon-bookmark"></i>&nbsp;&nbsp;<a href="%3$s" rel="bookmark">permalink</a>.', 'ipt_kb' );
            } else {
                $meta_text = __( 'Bookmark the <i class="glyphicon glyphicon-bookmark"></i>&nbsp;&nbsp;<a href="%3$s" rel="bookmark">permalink</a>.', 'ipt_kb' );
            }

        } else {
            // But this blog has loads of categories so we should probably display them here
            if ( '' != $tag_list ) {
                $meta_text = __( 'This entry was posted in <i class="glyphicon glyphicon-folder-open"></i>&nbsp;&nbsp;%1$s and tagged <i class="glyphicon glyphicon-tags"></i>&nbsp;&nbsp;%2$s. <br />Bookmark the <i class="glyphicon glyphicon-bookmark"></i>&nbsp;&nbsp;<a href="%3$s" rel="bookmark">permalink</a>.', 'ipt_kb' );
            } else {
                $meta_text = __( 'This entry was posted in <i class="glyphicon glyphicon-folder-open"></i>&nbsp;&nbsp;%1$s. <br />Bookmark the <i class="glyphicon glyphicon-bookmark"></i>&nbsp;&nbsp;<a href="%3$s" rel="bookmark">permalink</a>.', 'ipt_kb' );
            }

        } // end check for categories on this blog

        printf(
            $meta_text,
            $category_list,
            $tag_list,
            get_permalink()
        );
    ?>

    <?php edit_post_link( __( 'Edit', 'ipt_kb' ), '<span class="edit-link"><i class="glyphicon glyphicon-edit"></i>&nbsp;&nbsp;', '</span>' ); ?>
</footer><!-- .entry-meta -->

$('.faded-div').fadeOut(2000);
$('a.fade-in').click(function(){
    $('.faded-div').fadeIn(2000);
});
$('a.fade-out').click(function(){
    $('.faded-div').fadeOut(2000);
});

.faded-div{
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:blue ; 
    display: none;
}
.faded-div a
{
  color:white;
}

Answer 2

创建html叠加层

src

CSS样式

<body>
  <div class="overlay"></div>
  .....
</body>

的Javascript

.overlay{
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; 
    display: none;
}

你可以做更多的事情来顺利

从css样式中删除display none，并在窗口加载或文档就绪时应用一些javascript

$('a.do-fade').click(function(){
    $('.overlay').fadeIn(200);
}

Answer 3

html例如：

<div class="blank-div"></div> // somewhere in the <body>

<div class="some-link"> // your link
    <a class="my-link" href="/your/path.html">Click me</a>
</div>

js（使用jquery）：

$(".my-link").click(function(){
    $(".blank-div").fadeIn("slow", function(){
        location.href="/your/path.html";
    });
});

的CSS：

.blank-div{
    display: none;
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    z-index: 999;
}

您还可以使用更多动画或样式修改此代码

整页白色背景预加载器淡入链接点击（示例）

3 个答案: