jQueryマウスの入力とマウスはクラスを更新しないままにします

Question

divに背景画像を作成し、画像上にマウスを置くとdivが関連情報と共に表示されます。私はそれをマウスの入力時に表示し、fadeOut（）をマウスの離した時に表示します。 "slide"というクラスを更新する度にただし、クラスは一度しか更新されません。特別なfadeOut（）関数を使用せずに使用するだけで、問題なく動作します。私は何が欠けていますか？本部クラスは一般的なものに対し、一意であるために

$(document).ready(function() { 
 
    $(".fashion-img1").mouseenter(function() { 
 
    $(".fashion-img-content1").toggleClass("slide"); 
 
    }); 
 

 
    $(".fashion-img1").mouseleave(function() { 
 
    $(".fashion-img-content1").fadeOut(1000, function() { 
 
     $(this).toggleClass("slide"); 
 
    }); 
 
    }); 
 
});

.fashion-img-content1, 
 
.fashion-img-content2, 
 
.fashion-img-content3 { 
 
    margin: 40% 15% 0 10%; 
 
    visibility: hidden; 
 
    padding: 20px; 
 
    min-height: 200px; 
 
    background-color: #f9f9f9; 
 
    color: #333; 
 
} 
 
.slideanim { 
 
    visibility: hidden; 
 
} 
 
.slide { 
 
    animation-name: slide; 
 
    -webkit-animation-name: slide; 
 
    animation-duration: 1s; 
 
    -webkit-animation-duration: 1s; 
 
    visibility: visible; 
 
} 
 
@keyframes slide { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateY(70%); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: translateY(0%); 
 
    } 
 
} 
 
@-webkit-keyframes slide { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(70%); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(0%); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="row slideanim img-row"> 
 
    <div class="col-md-4"> 
 
    <div class="fashion-img1"> 
 
     <div class="fashion-img-content1 text-center"> 
 
     <span class="glyphicon glyphicon-search"></span> 
 
     <p>Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
    <div class="fashion-img2"> 
 
     <div class="fashion-img-content2 text-center"> 
 
     <span class="glyphicon glyphicon-search"></span> 
 
     <p>Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
    <div class="fashion-img3"> 
 
     <div class="fashion-img-content3 text-center"> 
 
     <span class="glyphicon glyphicon-search"></span> 
 
     <p>Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

本部IDの必要性。現在、クラスに固有の名前を付けているため、コードがDIVを適切にターゲティングしていません。

さらに、toggleClassを使用すると、離席して再入力するたびにクラスが再トグルされるため、効果的に元に戻すことができます。これは明快にするためにaddClassとremoveClassに変更されました。

最後に、fadeOutを使用すると、divの不透明度をゼロにフェードアウトし、CSS display:none;を適用して表示から除外します。 @Danielがコメントで指摘しているように、これはCSS visibility: none;とは異なります。

UPDATE：

にし、フェードアウト情報のdivを反映するように更新スニペット次のスニペットは、クラス名のクラススイッチと適切な使用方法を示しています。

$(".fashion-img").mouseenter(function() { 
 
    $(this).find(".fashion-img-content").addClass("slide"); 
 
    $(this).find(".info").fadeIn(); 
 
}); 
 

 
$(".fashion-img").mouseleave(function() { 
 
    $(this).find(".fashion-img-content").removeClass("slide"); 
 
    $(this).find(".info").fadeOut(); 
 
});

.fashion-img-content { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #333; 
 
    margin-top: 10px; 
 
} 
 
.info { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
.slide { 
 
    background: #09f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row slideanim img-row"> 
 
    <div class="col-md-4"> 
 
    <div class="fashion-img"> 
 
     <div class="fashion-img-content text-center"> 
 
     <span class="glyphicon glyphicon-search"></span> 
 
     <p class="info">Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
    <div class="fashion-img"> 
 
     <div class="fashion-img-content text-center"> 
 
     <span class="glyphicon glyphicon-search"></span> 
 
     <p class="info">Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
    <div class="fashion-img"> 
 
     <div class="fashion-img-content text-center"> 
 
     <span class="glyphicon glyphicon-search"></span> 
 
     <p class="info">Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>