Question

当我将鼠标悬停在图像上时，我正试图让图像的标题慢慢消失。到目前为止，当我悬停在标题上时会显示标题，但它会立即显示，而不会有任何淡入。我的代码中的fadeIn(2000)方法似乎没有做任何事情。我在这里犯了错误吗？

的jQuery

$('.imageContainer').on('mouseenter', '.uploadedImg', function(){
        var image = $(this);
        var imageParent = image.closest('.stickyImageContainer');
        imageParent.append('<div class="blackDiv"></div>').fadeIn(2000);
        imageParent.find('.imageTitle').css('visibility', 'visible').fadeIn(2000);
    }).on('mouseleave', '.blackDiv', function() {
        $(this).remove();
        $('.imageTitle').css('visibility', 'hidden');
    });

HTML

echo    "<div class='imageContainer'>"  
                .'<div class="stickyImageContainer"><h1 class="imageTitle">'.$row["name"].'</h1><a href="imageInfo.php?image='.$row["path"].'"><img class="uploadedImg" src="/uploads/'.$row["path"] .'" alt="Random image" /></a> ';

    if (isset($_SESSION['id'])) {
        if ($hasVoted < 1) {
            echo    "<div class='upvoteDownvoteRatingContainer'>
                    <form class='upvoteImage' method='POST' action=''>
                        <input type='hidden' name='action' value='upvote'>
                        <input type='hidden' name='id' value='".$row['id']."'>
                        <input type='hidden' name='userId' value='".$currentUser."'>
                        <input type='hidden' name='voteType' value='voteImage'>
                        <button class='upvoteImageButton' type='submit' name='upvoteImage'><img class='arrowUp' src='../images/Social Media/arrowUp.png' alt='submit'></button>
                    </form>";

            echo "<div class='ratingNumber'>";
            echo $row['upvotes'] - $row['downvotes'];
            echo "</div>";

            echo    "<form class='downvoteImage' method='POST' action=''>
                        <input type='hidden' name='action' value='downvote'>
                        <input type='hidden' name='id' value='".$row['id']."'>
                        <input type='hidden' name='userId' value='".$currentUser."'>
                        <input type='hidden' name='voteType' value='voteImage'>
                        <button class='downvoteImageButton' type='submit' name='downvoteImage'><img class='arrowDown' src='../images/Social Media/arrowDown.png' alt='submit'></button>
                    </form></div>";

Answer 1

您必须先隐藏元素，然后才能淡入。请尝试使用hide().fadeIn(2000)

$('.imageContainer').on('mouseenter', '.uploadedImg', function(){
    var image = $(this);
    var imageParent = image.closest('.stickyImageContainer');
    imageParent.append('<div class="blackDiv"></div>').hide().fadeIn(2000);
    imageParent.find('.imageTitle').css('visibility', 'visible').fadeIn(2000);
}).on('mouseleave', '.blackDiv', function() {
    $(this).remove();
    $('.imageTitle').css('visibility', 'hidden');
});

Answer 2

在CSS中设置图片display: none 然后它将被隐藏，直到调用fadeIn函数

jQuery fadeIn（）方法不起作用...

2 个答案: