jQuery fadeIn（）メソッドが機能しません...

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を設定するe画像display: none fadeIn関数が呼び出されるまで非表示になる