javascript - 淡化 innerhtml 更改

Question

正如标题所说，我想要实现的是在 "Patch "+ $Patch_next 字符串中淡入淡出，而不是在悬停时立即显示它。

if(isset($Patch_next)){
                echo'<a onmouseover="next_patch(this)" onmouseout="next(this)" href="'.$Patch_next.'" style="float: left; margin-top: 10px;" class="change_patch">NEXT</a>';}
            if(isset($Patch_previous)){
                echo '<a href="'.$Patch_previous.'" class="change_patch" style="float: right; margin-top: 10px; text-align: right;">PREVIOUS</a>';}
                mysqli_close($conn);
        //Previous and Next patch buttons       
                echo '</div>
            </body>
        </html>';
    }
?>
    <script>
        function next_patch(x){
            x.innerHTML="Patch "+<?php echo $Patch_next;?>.fadeIn();

        }
        function next(x){
            x.innerHTML="NEXT";
        }

    </script>

Answer 1

你可能想为此使用 CSS:

.test {
    -webkit-transition: 0.25s; /* Safari 3.1 to 6.0 */
    transition: 0.25s;
    opacity: 0.3;
}
.test:hover {
    opacity: 1;
}

<p class="test">Hello World</p>

jQuery 版本:

$(document).ready(function() {
    $('.test').fadeOut('slow', function() {
        $('.test').text('test2').fadeIn('slow');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="test"><?php echo $Patch_next ;?></p>