/ /ブートストラップドロップダウンホバートランジション - jquery、twitter-bootstrap、css3、twitter-bootstrap-3

ブートストラップドロップダウンホバー移行 - jquery、twitter-bootstrap、css3、twitter-bootstrap-3

私は、ホバー上のBootstrapドロップダウンメニューで遷移がフェードアウトするようにしようとしています。

私の試み

.dropdown-menu {
display: block;
opacity: 0;
-moz-transition:    all 1000ms ease;
-webkit-transition: all 1000ms ease;
-o-transition:      all 1000ms ease;
-ms-transition:     all 1000ms ease;
transition:         all 1000ms ease;
}

.sidebar-nav li:hover .dropdown-menu {
display: block;
opacity: 1;
}

これは動作しませんでしたが、1000ms遅らせましたが、移行を追加しませんでした。私もjQueryで試したことがありますが、運がまったくありません。

ここではコードを使っています - ドロップダウンメニューは、メニューの最初のリンク「Arla nu」にあります。

回答:

回答№1は1
.dropdown .dropdown-menu{
display: block;
opacity: 0;

-moz-transition:    all 1000ms ease;
-webkit-transition: all 1000ms ease;
-o-transition:      all 1000ms ease;
-ms-transition:     all 1000ms ease;
transition:         all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
}

js関数を追加する

$(function(){
var $menu = $(".dropdown-menu");

$(".dropdown-toggle").hover(
function() {
$menu.css("opacity",1);
},
function() {
$menu.css("opacity",0);
});
})();

JSfiddleで答えを更新する

更新

フィドルをチェック http://jsfiddle.net/pjej7o2m/296/


回答№2の場合は0

あなたは、何を変えようとしているのかを断ち切ったようです。

.dropdown-menu {
-webkit-transition: opacity 1000ms ease;
-moz-transition: opacity 1000ms ease;
-o-transition: opacity 1000ms ease;
transition: opacity 1000ms ease;
opacity: 0;
}
.sidebar-nav li:hover .dropdown-menu {
opacity: 1;
}