fadeIn（）/ fadeOut（）でHide（）

Question

私はフェードインを行い、jqueryをフェードアウトしようとしています。しかし、私はいくつかの問題があります。

ページが読み込まれるときにdivを非表示にしますが、上にマウスを置くとフェードインしてから1秒間フェードインして消えます。私はその後、私のjqueryのに戻ってホバリング、その後出て推移してきた

：

$(document).ready(function(){ 
$('#hidedsl6').hide(); 
    $('#showdsl6').hover(function(){ 
     $('#hidedsl6').fadeIn(); 
     }, function(){ 
     $('#hidedsl6').fadeOut(); 
    }); 
    $('#showfttn10').hover(function(){ 
    }); 
    $('#showfttn15').hover(function(){ 
    }); 
    $('#showfttn25').hover(function(){ 
    }); 
    $('#showfttn50').hover(function(){ 
    }); 
}); 

マイHTML：

<h3 class="DSLLocation" id="showdsl6">DSL 6</h3> 
<button class="btn btnblue" id="hidedsl6" type="button">Order Now!</button> 

Answer 1

jQueryを使用する理由それはあなたが正確に何をしたいですか？

.products{ 
 
    display:table; 
 
    table-layout:fixed; 
 
    width: 100%; 
 
} 
 
.option{ 
 
    display: table-cell; 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 24px; 
 
    background: #C0FFEE; 
 
} 
 
.option button{ 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; height: 100%; 
 
    border: 0; 
 
    cursor: pointer; 
 
    background: #1CEA6E; 
 
    transition: 0.3s; -webkit-transition: 0.3s; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 
.option:hover button{ 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="products"> 
 

 
    <div class="option"> 
 
    <h3>DSL 6</h3> 
 
    <button>ORDER NOW!</button> 
 
    </div> 
 

 
    <div class="option"> 
 
    <h3>DSL 30</h3> 
 
    <button>ORDER NOW!</button> 
 
    </div> 
 

 
    <div class="option"> 
 
    <h3>SUPER DSL 50</h3> 
 
    <button>ORDER NOW!</button> 
 
    </div> 
 

 
</div>

Answer 2

$(document).ready(function(){ 
    $('#hidedsl6').hide(); 

     $('#showdsl6').hover(function(){ 
     $('#hidedsl6').fadeIn();}); 


}); 

Answer 3

が戻ったばかりのを止めるためには、preventDefaultを追加し、前後

をフェード。

$(document).ready(function(){ 
$('#hidedsl6').hide(); 
    $('#showdsl6').hover(function(){ 
     $('#hidedsl6').fadeIn(); 
     }, function(e){ 
     e.preventDefault(); 
     $('#hidedsl6').fadeOut(); 
    }); 
    $('#showfttn10').hover(function(){ 
    }); 
    $('#showfttn15').hover(function(){ 
    }); 
    $('#showfttn25').hover(function(){ 
    }); 
    $('#showfttn50').hover(function(){ 
    }); 
});